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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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中！）

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

在React中使用Typescript发布时间：2022-07-18

TypeScript-构造函数constructor发布时间：2022-07-18

客服电话

电子邮件

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

SimpleModule.ts

AMD / RequireJS SimpleModule.js

UMD SimpleModule.js

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

危险信号

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053