ES6 模塊

TypeScript 1.5 支持 ECMAScript 6 (ES6) 模塊. ES6 模塊可以看做之前 TypeScript 的外部模塊換上了新的語法: ES6 模塊是分開加載的源文件, 這些文件還可能引入其他模塊, 并且導(dǎo)出部分供外部可訪問. ES6 模塊新增了幾種導(dǎo)入和導(dǎo)出聲明. 我們建議使用 TypeScript 開發(fā)的庫(kù)和應(yīng)用能夠更新到新的語法, 但不做強(qiáng)制要求. 新的 ES6 模塊語法和 TypeScript 原來的內(nèi)部和外部模塊結(jié)構(gòu)同時(shí)被支持, 如果需要也可以混合使用.

導(dǎo)出聲明

作為 TypeScript 已有的 export 前綴支持, 模塊成員也可以使用單獨(dú)導(dǎo)出的聲明導(dǎo)出, 如果需要, as 語句可以指定不同的導(dǎo)出名稱.

interface Stream { ... }
function writeToStream(stream: Stream, data: string) { ... }
export { Stream, writeToStream as write };  // writeToStream 導(dǎo)出為 write

引入聲明也可以使用 as 語句來指定一個(gè)不同的導(dǎo)入名稱. 比如:

import { read, write, standardOutput as stdout } from "./inout";
var s = read(stdout);
write(stdout, s);

作為單獨(dú)導(dǎo)入的候選項(xiàng), 命名空間導(dǎo)入可以導(dǎo)入整個(gè)模塊:

import * as io from "./inout";
var s = io.read(io.standardOutput);
io.write(io.standardOutput, s);

重新導(dǎo)出

使用 from 語句一個(gè)模塊可以復(fù)制指定模塊的導(dǎo)出項(xiàng)到當(dāng)前模塊, 而無需創(chuàng)建本地名稱.

export { read, write, standardOutput as stdout } from "./inout";

export * 可以用來重新導(dǎo)出另一個(gè)模塊的所有導(dǎo)出項(xiàng). 在創(chuàng)建一個(gè)聚合了其他幾個(gè)模塊導(dǎo)出項(xiàng)的模塊時(shí)很方便.

export function transform(s: string): string { ... }
export * from "./mod1";
export * from "./mod2";

默認(rèn)導(dǎo)出項(xiàng)

一個(gè) export default 聲明表示一個(gè)表達(dá)式是這個(gè)模塊的默認(rèn)導(dǎo)出項(xiàng).

export default class Greeter {
    sayHello() {
        console.log("Greetings!");
    }
}

對(duì)應(yīng)的可以使用默認(rèn)導(dǎo)入:

import Greeter from "./greeter";
var g = new Greeter();
g.sayHello();

無導(dǎo)入加載

"無導(dǎo)入加載" 可以被用來加載某些只需要其副作用的模塊.

import "./polyfills";

了解更多關(guān)于模塊的信息, 請(qǐng)參見 ES6 模塊支持規(guī)范.

聲明與賦值的解構(gòu)

TypeScript 1.5 添加了對(duì) ES6 解構(gòu)聲明與賦值的支持.

解構(gòu)

解構(gòu)聲明會(huì)引入一個(gè)或多個(gè)命名變量, 并且初始化它們的值為對(duì)象的屬性或者數(shù)組的元素對(duì)應(yīng)的值.

比如說, 下面的例子聲明了變量 x, y 和 z, 并且分別將它們的值初始化為 getSomeObject().x, getSomeObject().x 和 getSomeObject().x:

var { x, y, z } = getSomeObject();

解構(gòu)聲明也可以用于從數(shù)組中得到值.

var [x, y, z = 10] = getSomeArray();

相似的, 解構(gòu)可以用在函數(shù)的參數(shù)聲明中:

function drawText({ text = "", location: [x, y] = [0, 0], bold = false }) {
    // 畫出文本
}

// 以一個(gè)對(duì)象字面量為參數(shù)調(diào)用 drawText
var item = { text: "someText", location: [1,2,3], style: "italics" };
drawText(item);

賦值

解構(gòu)也可以被用于普通的賦值表達(dá)式. 舉例來講, 交換兩個(gè)變量的值可以被寫作一個(gè)解構(gòu)賦值:

var x = 1;
var y = 2;
[x, y] = [y, x];

namespace (命名空間) 關(guān)鍵字

過去 TypeScript 中 module 關(guān)鍵字既可以定義 "內(nèi)部模塊", 也可以定義 "外部模塊"; 這讓剛剛接觸 TypeScript 的開發(fā)者有些困惑. "內(nèi)部模塊" 的概念更接近于大部分人眼中的命名空間; 而 "外部模塊" 對(duì)于 JS 來講, 現(xiàn)在也就是模塊了.

注意: 之前定義內(nèi)部模塊的語法依然被支持.

之前:

module Math {
    export function add(x, y) { ... }
}

之后:

namespace Math {
    export function add(x, y) { ... }
}

let 和 const 的支持

ES6 的 let 和 const 聲明現(xiàn)在支持編譯到 ES3 和 ES5.

Const

const MAX = 100;

++MAX; // 錯(cuò)誤: 自增/減運(yùn)算符不能用于一個(gè)常量

塊級(jí)作用域

if (true) {
  let a = 4;
  // 使用變量 a
}
else {
  let a = "string";
  // 使用變量 a
}

alert(a); // 錯(cuò)誤: 變量 a 在當(dāng)前作用域未定義

for...of 的支持

TypeScript 1.5 增加了 ES6 for...of 循環(huán)編譯到 ES3/ES5 時(shí)對(duì)數(shù)組的支持, 以及編譯到 ES6 時(shí)對(duì)滿足 Iterator 接口的全面支持.

例子:

TypeScript 編譯器會(huì)轉(zhuǎn)譯 for...of 數(shù)組到具有語義的 ES3/ES5 JavaScript (如果被設(shè)置為編譯到這些版本).

for (var v of expr) { }

會(huì)輸出為:

for (var _i = 0, _a = expr; _i < _a.length; _i++) {
    var v = _a[_i];
}

裝飾器

TypeScript 裝飾器是局域 ES7 裝飾器 提案的.

一個(gè)裝飾器是:

• 一個(gè)表達(dá)式
• 并且值為一個(gè)函數(shù)
• 接受 target, name, 以及屬性描述對(duì)象作為參數(shù)
• 可選返回一個(gè)會(huì)被應(yīng)用到目標(biāo)對(duì)象的屬性描述對(duì)象

了解更多, 請(qǐng)參見 裝飾器 提案.

例子:

裝飾器 readonly 和 enumerable(false) 會(huì)在屬性 method 添加到類 C 上之前被應(yīng)用. 這使得裝飾器可以修改其實(shí)現(xiàn), 具體到這個(gè)例子, 設(shè)置了 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;
  }
}

計(jì)算屬性

使用動(dòng)態(tài)的屬性初始化一個(gè)對(duì)象可能會(huì)很麻煩. 參考下面的例子:

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 };
}

這里我們需要?jiǎng)?chuàng)建一個(gè)包含了 neighbor-map 的變量, 便于我們初始化它. 使用 TypeScript 1.5, 我們可以讓編譯器來干重活:

function makeNode(name: string, initialNeighbor: Node): Node {
    return {
        name: name,
        neighbors: {
            [initialNeighbor.name]: initialNeighbor
        }
    }
}

指出 UMD 和 System 模塊輸出

作為 AMD 和 CommonJS 模塊加載器的補(bǔ)充, TypeScript 現(xiàn)在支持輸出為 UMD (Universal Module Definition) 和 System 模塊的格式.

用法:

tsc --module umd

以及

tsc --module system

Unicode 字符串碼位轉(zhuǎn)義

ES6 中允許用戶使用單個(gè)轉(zhuǎn)義表示一個(gè) Unicode 碼位.

舉個(gè)例子, 考慮我們需要轉(zhuǎn)義一個(gè)包含了字符 '