TypeScript基础入门之模块(一)

转发 TypeScript基础入门之模块(一)

模块

关于术语的一点说明: 请务必注意一点，TypeScript 1.5里术语名已经发生了变化。 "内部模块"如今称作"命名空间"。 "外部模块"如今则简称为"模块"，这是为了与 ECMAScript 2015里的术语保持一致，(也就是说 module X { 至关于如今推荐的写法 namespace X {)。

介绍

从ECMAScript 2015开始，JavaScript引入了模块的概念。TypeScript也沿用这个概念。

模块在其自身的做用域里执行，而不是在全局做用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。 相反，若是想使用其它模块导出的变量，函数，类，接口等的时候，你必需要导入它们，可使用import形式之一。

模块是自声明的；两个模块之间的关系是经过在文件级别上使用imports和exports创建的。

模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的做用是在执行此模块代码前去查找并执行这个模块的全部依赖。 你们最熟知的JavaScript模块加载器是服务于Node.js的 CommonJS和服务于Web应用的Require.js。

TypeScript与ECMAScript 2015同样，任何包含顶级import或者export的文件都被当成一个模块。相反地，若是一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（所以对模块也是可见的）。

导出

导出声明

任何声明（好比变量，函数，类，类型别名或接口）都可以经过添加export关键字来导出。

Validation.ts

export interface StringValidator {
  isAcceptable(s: string): boolean;
}

ZipCodeValidator.ts

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

export class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string): boolean {
    return s.length === 5 && numberRegexp.test(s);
  }
}

导出语句

导出语句很便利，由于咱们可能须要对导出的部分重命名，因此上面的例子能够这样改写：

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

class ZipCodeValidator implements StringValidator {
  isAcceptable(s: string): boolean {
    return s.length === 5 && numberRegexp.test(s);
  }
}

export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator }

从新导出

咱们常常会去扩展其它模块，而且只导出那个模块的部份内容。 从新导出功能并不会在当前模块导入那个模块或定义一个新的局部变量。
ParseIntBasedZipCodeValidator.ts

export class ParseIntBasedZipCodeValidator {
  isAcceptable(s: string): boolean {
    return s.length === 5 && parseInt(s).toString() === s;
  }
}

export { ZipCodeValidator as RegExpBaseZipCodeValidator } from './ZipCodeValidator';

或者一个模块能够包裹多个模块，并把他们导出的内容联合在一块儿经过语法：export * from "module"。

AllValidators.ts

export * from "./StringValidator"; // exports interface 'StringValidator'
export * from "./ZipCodeValidator";  // exports class 'ZipCodeValidator'

导入

模块的导入操做与导出同样简单。 可使用如下import形式之一来导入其它模块中的导出内容。

导入一个模块中的某个导出内容

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

能够对导入内容重命名

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();

将整个模块导入到一个变量，并经过它来访问模块的导出部分

import * as validator from "./ZipCodeValidator";
let myValidator = new validator.ZipCodeValidator();

具备反作用的导入模块

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

import "./my-module.js";

默认导出

每一个模块均可以有一个default导出。 默认导出使用 default关键字标记；而且一个模块只可以有一个default导出。 须要使用一种特殊的导入形式来导入 default导出。

default导出十分便利。 好比，像JQuery这样的类库可能有一个默认导出 jQuery或$，而且咱们基本上也会使用一样的名字jQuery或$导出JQuery。

JQuery.d.ts

declare let $: JQuery;
export default $;

App.ts

import $ from "JQuery";

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

类和函数声明能够直接被标记为默认导出。 标记为默认导出的类和函数的名字是能够省略的。

ZipCodeValidator.ts

export default class ZipCodeValidator {
    static numberRegexp = /^[0-9]+$/;
    isAcceptable(s: string) {
        return s.length === 5 && ZipCodeValidator.numberRegexp.test(s);
    }
}

Test.ts

import validator from "./ZipCodeValidator";

let myValidator = new validator();

或者

StaticZipCodeValidator.ts

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

export default function (s: string) {
    return s.length === 5 && numberRegexp.test(s);
}

Test.ts

import validate from "./StaticZipCodeValidator";

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

// Use function validate
strings.forEach(s => {
  console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`);
});

default导出也能够是一个值
OneTwoThree.ts

export default "123";

Log.ts

import num from "./OneTwoThree";

console.log(num); // "123"

export =和 import = require()
CommonJS和AMD都有一个exports对象的概念，它包含了一个模块的全部导出内容。

它们也支持把exports替换为一个自定义对象。 默认导出就比如这样一个功能；然而，它们却并不相互兼容。 TypeScript模块支持 export =语法以支持传统的CommonJS和AMD的工做流模型。

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

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

ZipCodeValidator.ts

let numberRegexp = /^[0-9]+$/;
class ZipCodeValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export = ZipCodeValidator;

Test.ts

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

// 尝试一些字符
let strings = ["Hello", "98052", "101"];

// 使用validator
let validator = new zip();

// 检测每一个字符串，是否经过验证
strings.forEach(s => {
  console.log(`"${ s }" - ${ validator.isAcceptable(s) ? "matches" : "does not match" }`);
});