全局模块
默认情况下,当你在一个新的TypeScript文件中写下代码时,它处于全局命名空间中。如在foo.ts里的以下代码:
const foo = 123;
如果你在相同的项目里创建了一个新的文件bar.ts,TypeScript类型系统将会允许你使用变量foo,就好像它在全局可用一样:
const bar = foo; // allowed
毋庸置疑,使用全局变量空间是危险的,因为它会与文件内的代码命名冲突。我们强烈推荐使用文件模块。
文件模块
它也被称为外部模块。如果在你的TypeScript文件的根级别位置含有import或者export,它会在这个文件中创建一个本地的作用域。因此,我们需要把上文foo.ts改成如下方式(注意 export用法):
export const foo = 123;
在全局命名空间里,我们不再有foo,这可以通过创建一个新文件 bar.ts 来证明:
const bar = foo; // ERROR: "cannot find name 'foo'"
如果你想在bar.ts里使用来自foo.ts的内容,你必须显式导入它,更新bar.ts如下所示:
import { foo } from './foo';
const bar = foo; // allow
在bar.ts文件里使用import,不但允许你使用从其他文件导入的内容,而且它会将此文件bar.ts标记为一个模块,文件内定义的声明也不会污染全局命名空间。
ES模块语法
使用export关键字导出一个变量(或者类型):
// foo.ts
export const someVar = 123;
export type someType = {
foo: string;
};
export的写法除了上面这样,还有另外一种:
// foo.ts
const someVar = 123;
type someType = {
type: string;
};
export { someVar, someType };
你也可以重命名变量导出:
//foo.ts
const someVar = 123;
export { someVar as aDifferentName };
使用import关键字导入一个变量或者是一个类型:
// bar.ts
import { someVar, someType } from './foo';
重命名导入变量或者类型:
// bar.ts
import { someVar as aDifferentName } from './foo';
除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面:
// bar.ts
import * as foo from './foo';
// 你可以使用 `foo.someVar` 和 `foo.someType` 以及其他任何从 `foo` 导出的变量或者类型
仅导入模块:
import 'core-js'; // 一个普通的 polyfill 库
从其他模块导入后整体导出:
export * from './foo';
从其他模块导入后,部分导出:
export { someVar } from './foo';
通过重命名,部分导出从另一个模块导入的项目:
export { someVar as aDifferentName } from './foo';
export default默认导入/导出
使用export default默认导出的语法:
- 在一个变量之前(不需要使用 let/const/var);
- 在一个函数之前;
- 在一个类之前。
// some var
export default (someVar = 123);
// some function
export default function someFunction() {}
// some class
export default class someClass {}
导入使用 import someName from 'someModule' 语法(你可以根据需要为导入命名):
import someLocalNameForThisFile from './foo';