TypeScript 2.0 Beta版 - 強大功能釋出!

今天我們很高興能告訴您 TypeScript 2.0 的 beta 版釋出了!如果您還對 TypeScript 不熟悉的話,您今天就可以開始在我們的網站上學習。

要怎麼取得 beta 版呢?您可以下載 TypeScript 2.0 Beta for Visual Studio 2015(需要 VS 2015 Update 3),或直接執行

 npm install -g typescript@beta

這個版本包含了很多新的功能,就像是我們對於 .d .ts 檔案新的工作流程,以下我們就來看看有哪些新功能吧!

 

不可為 null 的類型

nullundefined 是兩個在 JavaScript 中最常見的錯誤來源。在沒有 TypeScript 2.0 之前,nullundefined 是存在於每一種類型,意思是說如果您有一個函式要取得一個 string,您不能光從類型確定您實際上取得的是 string 還是 null

在 TypeScript 2.0 中,新的 --strictNullChecks 旗標改成讓 string 就是指 string,而 number 就是指 number

 let foo: string = null; // Error!

那如果您想要讓某個東西可以是 null 呢?我們有兩種新的類型來面對這種情況:nullundefined。就如同您所想像的,null 就只能包含 null,而 undefined 只能包含 undefined。雖然它們本身並不怎麼實用,但是您可以用一個聯集類型來使用它們,描述有些東西可以是 null/undefined

 let foo: string | null = null; // Okay!

因為通常您可能比類型系統還了解情況,所以我們也引進了一個後置的 ! 運算子,讓 nullundefined 從類型中排除掉。

 declare let strs: string[] | undefined;

// Error! 'strs' is possibly undefined.
let upperCased = strs.map(s => s.toUpperCase());

// 'strs!' means we're sure it can't be 'undefined', so we can call 'map' on it.
let lowerCased = strs!.map(s => s.toLowerCase());

 

類型的控制流程分析

TypeScript 能夠支援處理可為 null 的類型,是多虧了程式中類型被追蹤方式的改變。在 2.0 版本中,我們開始使用控制流程分析,來知道某個位置是什麼類型。

 /**
 * @param recipients  An array of recipients, or a comma-separated list of recipients.
 * @param body        Primary content of the message.
 */
function sendMessage(recipients: string | string[], body: string) {
    if (typeof recipients === "string") {
        recipients = recipients.split(",");
    }

    // TypeScript knows that 'recipients' is a 'string[]' here.
    recipients = recipients.filter(isValidAddress);
    for (let r of recipients) {
        // ...
    }
}

請注意,在經過 if 的區塊之後,TypeScript 就知道它必須處理一個 string 的陣列。這樣就可以在早期發現問題,並節省您 debug 的時間。

 let bestItem: Item;
for (let item of items) {
    if (item.id === 42) bestItem = item;
}

// Error! 'bestItem' might not have been initialized if 'items' was empty.
let itemName = bestItem.name;

我們欠 Ivo Gabe de Wolff 一個很大的感謝,他對於這個功能的貢獻與實作,是從他的論文開始的,也成為了 TypeScript 的一部份。

 

更簡單的模組宣告

有時候您只想要告訴 TypeScript 有一個模組,但並不在乎它長得怎樣。您可能有寫過類似下面這樣的東西:

 declare module "foo" {
    var x: any;
    export = x;
}

但這還蠻麻煩的,所以我們讓它更容易一點,並擺脫了樣板。在 TypeScript 2.0 您可以只要寫:

 declare module "foo";
declare module "bar";

當您準備好要勾勒出模組的樣子,可以回到這些宣告並定義您所需要的結構。
那如果您需要一個套件包含很多模組呢?一個個模組寫出來太麻煩了,TypeScript 2.0 讓這件事變得很簡單,只需要使用萬用字元在這些宣告就好了!

 declare module "foo/*";

現在您可以匯入任何路徑,只要開頭是 foo/ TypeScript 都會假設它存在。您可以利用這點,如果您的模組加載器也了解如何根據某些格式匯入。例如:

 declare module "*!text" {
    const content: string;
    export = content;
}

現在只要您匯入一個結尾是 !text 的路徑,TypeScript 就會了解這個匯入的類型是 string

 import text = require("./hello.txt!text");
text.toLowerCase();

 

下一步

您可能會想知道的一個功能是,在 ES3 和 ES5 中 async 函式的支援。本來這個功能有在 2.0 的版本被提名,可是要合理地實作 async/await,我們需要重寫 TypeScript 的 emitter 作為一系列樹的轉換。這樣做同時要維持 TypeScript 的快速,需要很多工作與對於細節的注意。雖然我們對於今天的實作有信心,但是自信是比不上徹底的測試,而且需要更多時間來讓 async/await 穩定。您可以在 TypeScript 2.1 中期待這個功能,如果您想要追蹤我們的進度,目前在 GitHub 有開放提取要求

TypeScript 2.0 還是包含了很多有用的新功能,而我們也將會持續推出更多細節。如果您很好奇有哪些新功能,您可以看一下我們的 wiki。在未來的幾週,更穩定的版本也將會釋出,而離最終產品也不遠了囉!

我們很樂意聽到任何您的意見與回饋,無論是在下面的評論或是在 GitHub 上。Happy hacking!

 

本文翻譯自 Announcing TypeScript 2.0 Beta


 

VS     typescript

若對以上技術及產品有任何問題,很樂意為您服務! 請洽:台灣微軟開發工具服務窗口 – MSDNTW@microsoft.com / 02-3725-3888 #4922