TypeScript 中的 export 和 import
时间:2022-07-23
本文章向大家介绍TypeScript 中的 export 和 import,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法