开启掘金成长之旅!这是我参与「掘金日新计划 · 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 =来导出内容。