Typescript学习笔记（五） 模块机制

时间：2023-01-11 19:54:55

javascript从es5之前都缺少一种模块机制，无法通过js引入文件，于是requirejs等等的加载器应运而生。这些加载器的使用也并不统一，产生了amd，commonjs，umd等等的规范，各有所长，直到es6的发布，js自身引入的模块机制，将会在以后逐渐被应用起来。

Typescrit的模块机制与es6的模块基本类似，也提供了转换为amd，es6，umd，commonjs，system的转换，一会我们通过一个简单的例子来运行一下ts的模块。

ts特殊的内联标签。

/// <reference path="revence.ts" />

三个斜线，reference标签，path指向引入的文件，引入的文件呢，需要定义一个命名空间来引用定义的东西。

revence.ts

 namespace Validation {

    const ac = "abc";

    export  function a(){

        console.log("module be loaded");

    }

}

定义一个名为Validation的命名空间，导出用export导出。这里Validation下的a函数被导出，引用的时候就可以用Validation.a()来引用它。

text.ts

/// <reference path="revence.ts" />

Validation.a();

main文件是这个text.ts,引用了revence文件。编译器怎么编译它呢？

两种方法：一，把所有的输入文件编译为一个输出文件，需要使用--outFile标记：

tsc text.ts --outFile a.js

这样输出文件都会在a.js中，网页script引入了。

　　　　二，我们可以编译每一个文件（默认方式），那么每个源文件都会对应生成一个JavaScript文件。 然后，在页面上通过<script>标签把所有生成的JavaScript文件按正确的顺序引进来，比如：

tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts
　　 <script src="Validation.js" type="text/javascript" />

    <script src="LettersOnlyValidator.js" type="text/javascript" />

    <script src="ZipCodeValidator.js" type="text/javascript" />

    <script src="Test.js" type="text/javascript" />

接下来就是ts的模块机制，而非script加载机制了。

关键词：import，export。同es6。

通过export关键词导出，包括interface的任何东西都会被导出。比如

export const numberRegexp = /^[0-9]+$/;
export interface StringValidator {

    isAcceptable(s: string): boolean;

}
export class ParseIntBasedZipCodeValidator {

    isAcceptable(s: string) {

        return s.length === 5 && parseInt(s).toString() === s;

    }

}

不用关心导出内容是什么，反正通过export已把这些东西都导出了。

1。重新导出。as相当于重命名，from之后的是导入的地址，这相当于从./ZipCodeValidator中把ZipCodeValidator导入，重命名为RegExpBasedZipCodeValidator再导出。记住用法即可。

// 导出原先的验证器但做了重命名

export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator";

2。整合导出。*相当于全部导出。下面代码整合了3个文件，并全部导出。

export * from "./StringValidator"; // exports interface StringValidator

export * from "./LettersOnlyValidator"; // exports class LettersOnlyValidator

export * from "./ZipCodeValidator";  // exports class ZipCodeValidator

导入关键字是import。

import基本用法

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

这里./ZipCodeValidator导出的东西里面有个名字叫ZipCodeValidator的，用它的名字导入。这里{xxx}={123}，就是这种形式，其实用到了es6的解构赋值。不懂的转战es6。调用用其名字直接调用就可以了。

1。导入重命名

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";

let myValidator = new ZCV();

as语法，重命名为ZCV

2。导入全部

import * as validator from "./ZipCodeValidator";

let myValidator = new validator.ZipCodeValidator();

这里导入了./ZipCodeValidator文件的所有导出，而不是上个例子仅导入ZipCodeValidator。as validator相当于给了所有导出一个名字，可以理解为所有导出的命名空间。

Tips：

尽管不推荐这么做，一些模块会设置一些全局状态供其它模块使用。 这些模块可能没有任何的导出或用户根本就不关注它的导出。 使用下面的方法来导入这类模块：

import "./my-module.js";

3。默认导出。default

比如

declare let $: JQuery;

export default $;

引用

import $ from "JQuery";

$("button.continue").html( "Next Step..." );

default只能导出一项，仅导出一个函数，或者一个接口，或者任何一个单项的东西，default是最佳实践。因为在import的时候不指定导入的东西默认导入default。看下面这个例子

export default class ZipCodeValidator {

    static numberRegexp = /^[0-9]+$/;

    isAcceptable(s: string) {

        return s.length === 5 && ZipCodeValidator.numberRegexp.test(s);

    }

}
import validator from "./ZipCodeValidator";

let validator = new validator();

4。export = 和 import = require()

TypeScript模块支持export =语法，以配合传统的CommonJS和AMD的工作流。

export =语法定义一个模块的导出对象。 它可以是类，接口，命名空间，函数或枚举。

若要导入一个使用了export =的模块时，必须使用TypeScript提供的特定语法import let = require("module")。

let numberRegexp = /^[0-9]+$/;

class ZipCodeValidator {

    isAcceptable(s: string) {

        return s.length === 5 && numberRegexp.test(s);

    }

}

export = ZipCodeValidator;
import zip = require("./ZipCodeValidator");

// Some samples to try

let strings = ["Hello", "98052", "101"];

// Validators to use

let validator = new zip.ZipCodeValidator();

// Show whether each string passed each validator

strings.forEach(s => {

  console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);

});

5。编译为其他模块标准。

SimpleModule.ts
import m = require("mod");

export let t = m.something + 1;
AMD / RequireJS SimpleModule.js
define(["require", "exports", "./mod"], function (require, exports, mod_1) {

    exports.t = mod_1.something + 1;

});

CommonJS / Node SimpleModule.js

let mod_1 = require("./mod");

exports.t = mod_1.something + 1;
UMD SimpleModule.js
(function (factory) {

    if (typeof module === "object" && typeof module.exports === "object") {

        let v = factory(require, exports); if (v !== undefined) module.exports = v;

    }

    else if (typeof define === "function" && define.amd) {

        define(["require", "exports", "./mod"], factory);

    }

})(function (require, exports) {

    let mod_1 = require("./mod");

    exports.t = mod_1.something + 1;

});

System SimpleModule.js

System.register(["./mod"], function(exports_1) {

    let mod_1;

    let t;

    return {

        setters:[

            function (mod_1_1) {

                mod_1 = mod_1_1;

            }],

  execute: function() {

            exports_1("t", t = mod_1.something + 1);

        }

    }

});

Native ECMAScript 2015 modules SimpleModule.js

import { something } from "./mod";

export let t = something + 1;

命令行的命令就是加 --module或者-m加要编译的规范名称。比如编译为amd

tsc text.ts -m amd

用tsc --help可以看到-m的各项参数。

高级加载

typescript的按需加载。也叫动态加载。看我博客前几篇的webpack中，用的require.ensure做按需加载，感觉比较麻烦。然而ts的按需加载的简单得益于它的省略引用。即：

编译器会检测是否每个模块都会在生成的JavaScript中用到。 如果一个模块标识符只在类型注解部分使用，并且完全没有在表达式中使用时，就不会生成require这个模块的代码。 省略掉没有用到的引用对性能提升是很有益的，并同时提供了选择性加载模块的能力。

这种模式的核心是import id = require("...")语句可以让我们访问模块导出的类型。 模块加载器会被动态调用（通过require）

示例：Node.js里的动态模块加载
declare function require(moduleName: string): any;

import { ZipCodeValidator as Zip } from "./ZipCodeValidator";

if (needZipValidation) {

    let ZipCodeValidator: typeof Zip = require("./ZipCodeValidator");

    let validator = new ZipCodeValidator();

    if (validator.isAcceptable("...")) { /* ... */ }

}

示例：require.js里的动态模块加载

declare function require(moduleNames: string[], onLoad: (...args: any[]) => void): void;

import { ZipCodeValidator as Zip } from "./ZipCodeValidator";

if (needZipValidation) {

    require(["./ZipCodeValidator"], (ZipCodeValidator: typeof Zip) => {

        let validator = new ZipCodeValidator();

        if (validator.isAcceptable("...")) { /* ... */ }

    });

}

只要if条件不成立，模块是不加载的。出个简单的例子：

text.ts

import m= require("revence");

export let t=1;;

revence.ts

export = {

    mod:1

}

编译为amd模块：根本没有引入刚才的模块。

define(["require", "exports"], function (require, exports) {

    exports.t = 1;

    ;

});

现在改为text.ts

import m= require("revence");

export let t=m.mod+1;;

编译出来为

define(["require", "exports", "revence"], function (require, exports, m) {

    exports.t = m.mod + 1;

    ;

});

模块加载的最佳实践

1。尽可能地在顶层导出

用户应该更容易地使用你模块导出的内容。 嵌套层次过多会变得难以处理，因此仔细考虑一下如何组织你的代码。

2。模块里避免使用命名空间

模块中使用命名空间是不必要的，在模块中导出的东西肯定不能重名，而导入时使用者肯定会为其命名或者直接使用，也不存在重名，使用命名空间是多余的。

3。如果仅导出单个 class 或 function，使用 export default。

如刚才所说，default是比较好的实践。

4。如果要导出多个对象，把它们放在顶层里导出

export class SomeType { /* ... */ }

export function someFunc() { /* ... */ }

5。导入时明确地列出导入的名字

import { SomeType, SomeFunc } from "./MyThings";

let x = new SomeType();

let y = someFunc();

6。导入大量模块时使用命名空间

注意是导入时。

export class Dog { ... }

export class Cat { ... }

export class Tree { ... }

export class Flower { ... }
import * as myLargeModule from "./MyLargeModule.ts";

let x = new myLargeModule.Dog();

7。使用重新导出进行扩展

你可能经常需要去扩展一个模块的功能。 JS里常用的一个模式是JQuery那样去扩展原对象。 如我们之前提到的，模块不会像全局命名空间对象那样去合并。 推荐的方案是不要去改变原来的对象，而是导出一个新的实体来提供新的功能。

危险信号

以下均为模块结构上的危险信号。重新检查以确保你没有在对模块使用命名空间：

  • 文件的顶层声明是export namespace Foo { ... } （删除Foo并把所有内容向上层移动一层）
  • 文件只有一个export class或export function （考虑使用export default）
  • 多个文件的顶层具有同样的export namespace Foo { （不要以为这些会合并到一个Foo中！）

相关文章