- 0133技术站
- 联系QQ:18840023
- QQ交流群
- 微信公众号
TypeScript 1.5 支持 ECMAScript 6 (ES6) 模块. ES6 模块可以看做之前 TypeScript 的外部模块换上了新的语法: ES6 模块是分开加载的源文件, 这些文件还可能引入其他模块, 并且导出部分供外部可访问. ES6 模块新增了几种导入和导出声明. 我们建议使用 TypeScript 开发的库和应用能够更新到新的语法, 但不做强制要求. 新的 ES6 模块语法和 TypeScript 原来的内部和外部模块结构同时被支持, 如果需要也可以混合使用.
作为 TypeScript 已有的 export
前缀支持, 模块成员也可以使用单独导出的声明导出, 如果需要, as
语句可以指定不同的导出名称.
interface Stream { ... } function writeToStream(stream: Stream, data: string) { ... } export { Stream, writeToStream as write }; // writeToStream 导出为 write
引入声明也可以使用 as
语句来指定一个不同的导入名称. 比如:
import { read, write, standardOutput as stdout } from "./inout"; var s = read(stdout); write(stdout, s);
作为单独导入的候选项, 命名空间导入可以导入整个模块:
import * as io from "./inout"; var s = io.read(io.standardOutput); io.write(io.standardOutput, s);
使用 from
语句一个模块可以复制指定模块的导出项到当前模块, 而无需创建本地名称.
export { read, write, standardOutput as stdout } from "./inout";
export *
可以用来重新导出另一个模块的所有导出项. 在创建一个聚合了其他几个模块导出项的模块时很方便.
export function transform(s: string): string { ... } export * from "./mod1"; export * from "./mod2";
一个 export default 声明表示一个表达式是这个模块的默认导出项.
export default class Greeter { sayHello() { console.log("Greetings!"); } }
对应的可以使用默认导入:
import Greeter from "./greeter"; var g = new Greeter(); g.sayHello();
"无导入加载" 可以被用来加载某些只需要其副作用的模块.
import "./polyfills";
了解更多关于模块的信息, 请参见 ES6 模块支持规范.
TypeScript 1.5 添加了对 ES6 解构声明与赋值的支持.
解构声明会引入一个或多个命名变量, 并且初始化它们的值为对象的属性或者数组的元素对应的值.
比如说, 下面的例子声明了变量 x
, y
和 z
, 并且分别将它们的值初始化为 getSomeObject().x
, getSomeObject().y
和 getSomeObject().z
:
var { x, y, z } = getSomeObject();
解构声明也可以用于从数组中得到值.
var [x, y, z = 10] = getSomeArray();
相似的, 解构可以用在函数的参数声明中:
function drawText({ text = "", location: [x, y] = [0, 0], bold = false }) { // 画出文本 } // 以一个对象字面量为参数调用 drawText var item = { text: "someText", location: [1,2,3], style: "italics" }; drawText(item);
解构也可以被用于普通的赋值表达式. 举例来讲, 交换两个变量的值可以被写作一个解构赋值:
var x = 1; var y = 2; [x, y] = [y, x];
namespace
(命名空间) 关键字过去 TypeScript 中 module
关键字既可以定义 "内部模块", 也可以定义 "外部模块"; 这让刚刚接触 TypeScript 的开发者有些困惑. "内部模块" 的概念更接近于大部分人眼中的命名空间; 而 "外部模块" 对于 JS 来讲, 现在也就是模块了.
注意: 之前定义内部模块的语法依然被支持.
之前:
module Math { export function add(x, y) { ... } }
之后:
namespace Math { export function add(x, y) { ... } }
let
和 const
的支持ES6 的 let
和 const
声明现在支持编译到 ES3 和 ES5.
const MAX = 100; ++MAX; // 错误: 自增/减运算符不能用于一个常量
if (true) { let a = 4; // 使用变量 a } else { let a = "string"; // 使用变量 a } alert(a); // 错误: 变量 a 在当前作用域未定义
for...of
的支持TypeScript 1.5 增加了 ES6 for...of
循环编译到 ES3/ES5 时对数组的支持, 以及编译到 ES6 时对满足 Iterator
接口的全面支持.
TypeScript 编译器会转译 for...of
数组到具有语义的 ES3/ES5 JavaScript (如果被设置为编译到这些版本).
for (var v of expr) { }
会输出为:
for (var _i = 0, _a = expr; _i < _a.length; _i++) { var v = _a[_i]; }
TypeScript 装饰器是局域 ES7 装饰器 提案的.
一个装饰器是:
target
, name
, 以及属性描述对象作为参数了解更多, 请参见 装饰器 提案.
装饰器 readonly
和 enumerable(false)
会在属性 method
添加到类 C
上之前被应用. 这使得装饰器可以修改其实现, 具体到这个例子, 设置了 descriptor
为 writable: false
以及 enumerable: false
.
class C { @readonly @enumerable(false) method() { } } function readonly(target, key, descriptor) { descriptor.writable = false; } function enumerable(value) { return function (target, key, descriptor) { descriptor.enumerable = value; } }
使用动态的属性初始化一个对象可能会很麻烦. 参考下面的例子:
type NeighborMap = { [name: string]: Node }; type Node = { name: string; neighbors: NeighborMap;} function makeNode(name: string, initialNeighbor: Node): Node { var neighbors: NeighborMap = {}; neighbors[initialNeighbor.name] = initialNeighbor; return { name: name, neighbors: neighbors }; }
这里我们需要创建一个包含了 neighbor-map 的变量, 便于我们初始化它. 使用 TypeScript 1.5, 我们可以让编译器来干重活:
function makeNode(name: string, initialNeighbor: Node): Node { return { name: name, neighbors: { [initialNeighbor.name]: initialNeighbor } } }
UMD
和 System
模块输出作为 AMD
和 CommonJS
模块加载器的补充, TypeScript 现在支持输出为 UMD
(Universal Module Definition) 和 System
模块的格式.
用法:
tsc --module umd
以及
tsc --module system
ES6 中允许用户使用单个转义表示一个 Unicode 码位.
举个例子, 考虑我们需要转义一个包含了字符 '
推荐手册