了解 TypeScript 模块化

76 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第14天,点击查看活动详情

前言

TypeScript 在 1.5 版本之前,有内部模块和外部模块的概念,从 1.5 版本开始,内部模块改称作命名空间,外部模块改称为模块。TypeScript 中的模块系统是遵循 ES6 标准的,TypeScript 和 ES6 保持一致,包含顶级 import 或 export 的文件都被当成一个模块,则里面定义的内容仅模块内可见,而不是全局可见。TypeScript 的模块除了遵循 ES6 标准的模块语法外,还有一些特定语法,用于类型系统兼容多个模块格式,下面来看一下 TypeScript 的模块。

export

TypeScript 中,仍然使用 export 来导出声明,而且能够导出的不仅有变量、函数、类,还包括 TypeScript 特有的类型别名和接口:

// funcInterface.ts
export interface Func {
  (arg: number): string;
}
export class C {
  constructor() {}
}
class B {}
export { B };
export { B as ClassB };

上面例子中,可以使用 export 直接导出一个声明,也可以先声明一个类或者其它内容,然后使用 export {}的形式导出,也可以使用 as 来为导出的接口换个名字再导出一次。

也可以像 ES6 模块那样重新导出一个模块,也就是 export 一个引入内容,也可以重新导出部分内容,也可以重命名重新导出:

// main.ts
export * from "./moduleB";
// main.ts
export { name } from "./moduleB";
// main.ts
export { name as nameProp } from "./moduleB";

import

导出的模块依然是使用 import:

// main.ts
import { name } from "./moduleB";
// main.ts
import * as info from "./moduleB";
//main.ts
import { name as nameProp } from "./moduleB";

同样,可以使用 import 直接接模块名或文件路径,进行具有副作用的导入:

import "./set-title.ts";

export default

同样在 TypeScript 中使用 export default 默认导出,这个和 ES6 一样:

// moduleB.ts
export default "TypeScript";
// main.ts
import name from "./moduleB.ts";
console.log(name); // 'TypeScript'

import = require()

TypeScript可以将代码编译为CommonJS、AMD或其它模块系统代码,同时会生成对应的声明文件。CommonJS和AMD两种模块系统语法是不兼容的,所以TypeScript为了兼容这两种语法,使得我们编译后的声明文件同时支持这两种模块系统,增加了export =和import xx = require()两个语句。

在导出一个模块时,可以使用export =来导出:

// moduleC.ts
class C {}
export = C;

使用这个形式导出的模块,必须使用import xx = require()来引入:

// main.ts
import ClassC = require("./moduleC");
const c = new ClassC();

如果模块不需要同时支持这两种模块系统,可以不使用export =来导出内容。