转载

TypeScript 中的 export 和 import

在 TypeScript 中，经常要使用 export 和 import 两个关键字，这两个关键字和 es6 中的语法是一致的，因为 TypeScript = es6 + type !

注意：目前没有任何浏览器实现 export 和 import ，要在浏览器中执行，必须借助 TypeScript 或者其它的转换器！

export

export 语句用于从文件（或模块）中导出函数，对象或者基础类型，语法如下：

export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, nameN }; export let name1, name2, …, nameN; // also var export let name1 = …, name2 = …, …, nameN; // also var, const  export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … };  export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …;

nameN表示要导出的标识符，可以在另一个文件中通过 import 语句导入。

有两种类型的导出，分别对应上面的语法：

命名的导出

export { myFunction } // 导出已经声明的函数 export const foo = Math.sqrt(2) // 导出一个常量

当需要导出多个值的时候，命名的导出就非常有用了，在导入时，可以使用同样的名字来引用对应的值，示例：

// mylib.ts export function cube(x: number): number {     return x * x * x; } const foo: number = Math.PI * Math.sqrt(2); export { foo }

在另一个文件 main.ts 中，这样使用：

// main.ts import { cube, foo } from './mylib'; console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888

默认的导出

export default function () {} // 导出默认的函数， 不使用花括号

一个文件（模块）默认的导出只能有一个，可以是类，函数，对象等，示例：

// mylib.ts export default function (x: number): number {     return x * x * x; }

在另一个文件 main.ts 中，这样使用：

// main.ts import cube from './mylib'; console.log(cute(3)); // 27

import

import 与 export 对应，用于导入其它文件（模块）导出的函数，对象或者其他基础类型，语法如下：

import defaultMember from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as name from "module-name"; import "module-name";

name 用来接收导入的值的对象的名称；
member, memberN 要导入的外部模块的导出名称；
defaultMember 要导入的外部模块的默认导出的名称；
alias, aliasN 要导入的外部模块的导出的别名；
module-name 要导入的外部模块的名称，通常是文件名；

import 常见的用法有：

导入整个模块的内容，在当前作用域插入 myModule 变量，包含 my-module.ts 文件中全部导出的绑定：
```
import * as myModule from 'my-module'; 
```
导入模块的某一个导出成员，在当前作用域插入 myMember 变量：
```
import { myMember } from 'my-module'; 
```
导入模块的多个导出成员，在当前作用域插入 foo 和 bar 变量：
```
import {foo, bar} from 'my-module'; 
```

导入模块的成员，并使用一个更好用的名字：

import {reallyReallyLongModuleMemberName as shortName} from 'my-module'; import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from 'my-module';

将整个模块座位附加功能导入，但是不导入模块的额导出成员
```
import 'my-module'; 
```
导入模块的默认导出：
```
import myDefault from 'my-module'; 
```

导入模块的默认导出和命名导出：

import myDefault, * as myModule from 'my-module'; // myModule used as a namespace

或者

import myDefault, {foo, bar} from 'my-module'; // specific, named imports

原文 http://beginor.github.io/2016/03/20/typescript-export-and-import.html

正文到此结束

所属分类：编程技术

本文标签： TypeScript HTML GitHub git ACE ip http lib
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

TypeScript 中的 export 和 import

export

import

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流