鍍金池/ 教程/ HTML/ TypeScript 1.7
初始化項目結(jié)構(gòu)
聯(lián)合類型
介紹
介紹
介紹
編譯選項
TypeScript 1.6
介紹
介紹
發(fā)展路線圖
介紹
在MSBuild里使用編譯選項
可迭代性
TypeScript 1.3
介紹
介紹
TypeScript 1.1
變量聲明
即將到來的Angular 2框架是使用TypeScript開發(fā)的。 因此Angular和TypeScript一起使用非常簡單方便
tsconfig.json
介紹
介紹
介紹
在MSBuild里使用編譯選項
使用TypeScript的每日構(gòu)建版本
新建工程
枚舉
三斜線指令
結(jié)合ASP.NET v5使用TypeScript
TypeScript里的this
介紹
TypeScript 1.4
編碼規(guī)范
介紹
模塊解析
ASP.NET 4
架構(gòu)概述
介紹
介紹
ASP.NET Core
TypeScript 1.8
介紹
介紹
創(chuàng)建簡單工程
TypeScript 1.7
TypeScript 1.5
NPM包的類型
支持TypeScript的編輯器

TypeScript 1.7

支持 async/await 編譯到 ES6 (Node v4+)

TypeScript 目前在已經(jīng)原生支持 ES6 generator 的引擎 (比如 Node v4 及以上版本) 上支持異步函數(shù). 異步函數(shù)前置 async 關(guān)鍵字; await 會暫停執(zhí)行, 直到一個異步函數(shù)執(zhí)行后返回的 promise 被 fulfill 后獲得它的值.

例子

在下面的例子中, 輸入的內(nèi)容將會延時 200 毫秒逐個打印:

"use strict";

// printDelayed 返回值是一個 'Promise<void>'
async function printDelayed(elements: string[]) {
    for (const element of elements) {
        await delay(200);
        console.log(element);
    }
}

async function delay(milliseconds: number) {
    return new Promise<void>(resolve => {
        setTimeout(resolve, milliseconds);
    });
}

printDelayed(["Hello", "beautiful", "asynchronous", "world"]).then(() => {
    console.log();
    console.log("打印每一個內(nèi)容!");
});

查看 Async Functions 一文了解更多.

支持同時使用 --target ES6--module

TypeScript 1.7 將 ES6 添加到了 --module 選項支持的選項的列表, 當編譯到 ES6 時允許指定模塊類型. 這讓使用具體運行時中你需要的特性更加靈活.

例子

{
    "compilerOptions": {
        "module": "amd",
        "target": "es6"
    }
}

this 類型

在方法中返回當前對象 (也就是 this) 是一種創(chuàng)建鏈式 API 的常見方式. 比如, 考慮下面的 BasicCalculator 模塊:

export default class BasicCalculator {
    public constructor(protected value: number = 0) { }

    public currentValue(): number {
        return this.value;
    }

    public add(operand: number) {
        this.value += operand;
        return this;
    }

    public subtract(operand: number) {
        this.value -= operand;
        return this;
    }

    public multiply(operand: number) {
        this.value *= operand;
        return this;
    }

    public divide(operand: number) {
        this.value /= operand;
        return this;
    }
}

使用者可以這樣表述 2 * 5 + 1:

import calc from "./BasicCalculator";

let v = new calc(2)
    .multiply(5)
    .add(1)
    .currentValue();

這使得這么一種優(yōu)雅的編碼方式成為可能; 然而, 對于想要去繼承 BasicCalculator 的類來說有一個問題. 想象使用者可能需要編寫一個 ScientificCalculator:

import BasicCalculator from "./BasicCalculator";

export default class ScientificCalculator extends BasicCalculator {
    public constructor(value = 0) {
        super(value);
    }

    public square() {
        this.value = this.value ** 2;
        return this;
    }

    public sin() {
        this.value = Math.sin(this.value);
        return this;
    }
}

因為 BasicCalculator 的方法返回了 this, TypeScript 過去推斷的類型是 BasicCalculator, 如果在 ScientificCalculator 的實例上調(diào)用屬于 BasicCalculator 的方法, 類型系統(tǒng)不能很好地處理.

舉例來說:

import calc from "./ScientificCalculator";

let v = new calc(0.5)
    .square()
    .divide(2)
    .sin()    // Error: 'BasicCalculator' 沒有 'sin' 方法.
    .currentValue();

這已經(jīng)不再是問題 - TypeScript 現(xiàn)在在類的實例方法中, 會將 this 推斷為一個特殊的叫做 this 的類型. this 類型也就寫作 this, 可以大致理解為 "方法調(diào)用時點左邊的類型".

this 類型在描述一些使用了 mixin 風格繼承的庫 (比如 Ember.js) 的交叉類型:

interface MyType {
    extend<T>(other: T): this & T;
}

ES7 冪運算符

TypeScript 1.7 支持將在 ES7/ES2016 中增加的冪運算符: ****=. 這些運算符會被轉(zhuǎn)換為 ES3/ES5 中的 Math.pow.

舉例

var x = 2 ** 3;
var y = 10;
y **= 2;
var z =  -(4 ** 3);

會生成下面的 JavaScript:

var x = Math.pow(2, 3);
var y = 10;
y = Math.pow(y, 2);
var z = -(Math.pow(4, 3));

改進對象字面量解構(gòu)的檢查

TypeScript 1.7 使對象和數(shù)組字面量解構(gòu)初始值的檢查更加直觀和自然.

當一個對象字面量通過與之對應(yīng)的對象解構(gòu)綁定推斷類型時:

  • 對象解構(gòu)綁定中有默認值的屬性對于對象字面量來說可選.
  • 對象解構(gòu)綁定中的屬性如果在對象字面量中沒有匹配的值, 則該屬性必須有默認值, 并且會被添加到對象字面量的類型中.
  • 對象字面量中的屬性必須在對象解構(gòu)綁定中存在.

當一個數(shù)組字面量通過與之對應(yīng)的數(shù)組解構(gòu)綁定推斷類型時:

  • 數(shù)組解構(gòu)綁定中的元素如果在數(shù)組字面量中沒有匹配的值, 則該元素必須有默認值, 并且會被添加到數(shù)組字面量的類型中.

舉例

// f1 的類型為 (arg?: { x?: number, y?: number }) => void
function f1({ x = 0, y = 0 } = {}) { }

// And can be called as:
f1();
f1({});
f1({ x: 1 });
f1({ y: 1 });
f1({ x: 1, y: 1 });

// f2 的類型為 (arg?: (x: number, y?: number) => void
function f2({ x, y = 0 } = { x: 0 }) { }

f2();
f2({});        // 錯誤, x 非可選
f2({ x: 1 });
f2({ y: 1 });  // 錯誤, x 非可選
f2({ x: 1, y: 1 });

裝飾器 (decorators) 支持的編譯目標版本增加 ES3

裝飾器現(xiàn)在可以編譯到 ES3. TypeScript 1.7 在 __decorate 函數(shù)中移除了 ES5 中增加的 reduceRight. 相關(guān)改動也內(nèi)聯(lián)了對 Object.getOwnPropertyDescriptorObject.defineProperty 的調(diào)用, 并向后兼容, 使 ES5 的輸出可以消除前面提到的 Object 方法的重復(fù)[1].