TypeScript全局模块及文件模块中的ES模块语法

2019-04-28320次阅读TypeScript

全局模块

默认情况下,当你在一个新的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';


 

上一篇: Gulp sass报错File to import not found or unreadable: common  下一篇: TypeScript中类型声明空间及变量声明空间  

TypeScript全局模块及文件模块中的ES模块语法相关文章