TypeScript 1.4 - 2.0 改版整理

TypeScript 2.0 已於 9/22 正式推出,想起從1.4版起已好久沒有深入了解改版差異,順勢做個重點整理。

TypeScript 改版歷程

TypeScript 1.0 推出時,由於具有支援強型別、介面、繼承等物件導向語言特性,提供編譯期錯誤檢查,再加上完整 IDE 支援,很適合開發大型且複雜的 JavaScript 程式,獲得許多前端開發者青睞,TypeScript 也自此成為我開發網站的首選。

TypeScript 在 1.1 時選擇重寫編譯器,提供四倍速度,同時也移上 Github,鼔勵開源社群參與協作。

1.4 TypeScript 加入大量 ES2015/ES6 支援以及新特性,包含:

  • Union Types ★★
    例如: x: number | number[],x 的型別可以是數字或是數字陣列
  • Type Alias
    為型別取別名,例如:type NgScope = ng.IScope, type Callback = () => void
  • Const Enums
    編譯時直接置換為數字,在 JavaScript 端完全隱形
  • 支援 ES6 的 Let/Const
    let 的用法與 var 相同,差別在於 let 嚴格限定變數存活範圍,杜絕干擾區塊外變數的可能性。const 則可用於宣告後定義好就不容更改的變數。
  • Template String ★★★★
    直接看範例:
    var rectangle = { height: 20, width: 10 };
    var areaMessage = `First line,
    Rectangle area is ${rectangle.height * rectangle.width}`;
    樣版字串使用「`」符號取代單引號或雙引號,在字串可嵌入變數,還像C# @"…"可支援換行,串接HTML標籤接到落落長時格外好用,大推!
    延伸閱讀:TypeScript Template Strings

TypeScript 1.5 陸續加入更多 ES6 支援,包含:

  • ES6 Module概念
    在 ES6 習慣以模組概念拆解成多個程式碼檔案,使用 export 決定對外公開範圍,要用時以 import 匯入引用。前幾天初試 Angular 2 已體驗過這種新做法。
  • Destructing
    使用陣列形式快速指定變數值
    const iterable = ['a', 'b'];
    var [x, y] = iterable; // x = 'a'; y = 'b'
  • Spread運算子 ★★
    用法 function drawText(x: number, y: number, ...strings: string[]) { … }
    概念相當於 C# 的 params,例如:void DrawText(decimal x, decimal y, params string[] strings)
    故寫成 drawText(10,20,"hello") drawText(10,20,"hello","world")都通,但Spread運算子還可加於呼叫參數前方,例如:
    var pos=[10,20], strings=["one","two"];
    drawText(…pos, "hello",…strings,"world");
    等同drawText(10,20,"hello","one","two","world");
  • for … of 語法
    類似 C# foreach (var … in …):
    for (var v of expr) { }
    等同於
    for (var _i = 0, _a = expr; _i < _a.length; _i++) {
        var v = _a[_i];
    }
  • 支援ES6內建Symbol 參考
  • ES6 Computed Property
  • Module 輸出選擇
    除了 AMD、CommonJS 外,再新增 SystemJS、UMD
  • 支援使用 tsconfig.json 設定專案以及編譯選項
  • Decorator
    與 Angular、Ember、Aurelia 開發團隊合作,TypeScript 1.5 融入 ES7 的 Decorator 特性,它也是 Angular 2 開發的重要關鍵:(如以下程式的 @Component 及 @View )
    import {Component, View, NgFor, bootstrap} from “angular2/angular2”;
    import {loadFile} from “audioFile”;
    import {displayAudioFile} from “displayAudio”;
     
    @Component({selector: ‘file-list’})
    @View({template: `
      <select id=”fileSelect” size=”5″>
        <option *ng-for=”#item of items; #i = index”
          [selected]=”selected === item”(click)=”updateSelection()”>{{ item }}</option>
      </select>`,
      directives: [NgFor]
    })
     
    class MyDisplay {
      items: string[];
      constructor() {
        this.items = [“item1”, “item2”];
      }
     
      updateSelection() { … }
    }

TypeScript 1.6-1.8 陸續再加入改良。

TypeScript 1.6

  • 支援 React Typing 及 JSX
  • Class Expression
    一列寫完類別宣告,例如:
    class StateHandler extends class { reset() { return true; } } {
  • 自訂型別檢核
    例如以下程式,若 a 是 Dog,在編譯時期就會出錯
    function isCat(a: Animal): a is Cat {
      return a.name === ‘kitty’;
    }
  • Intersection Type
    在 JavaScript 裡有時會使用 Mixin 概念或 jQuery.extended() 方法融合兩個不同型別物件同時具備兩種型別的介面,過去在這種情況下要實現強型別,需宣告一個新介面或類別以兼容兩種型別的介面,1.6 起可用 T & U 代表融合 T 與 U 屬性方法的混合型別,例如:
    function extend<T, U>(first: T, second: U): T & U
  • 支援抽象類別(Abstract Class)
  • 支援泛型別別名

TypeScript 1.7

  • 支援 async / await
  • Polymorphic this Typing
    多形概念的 this,主要用於 Fluent 串接式 API,看範例比較好懂:
    interface Model {
        setupBase(): this;
    }
     
    interface AdvancedModel extends Model {
        setupAdvanced(): this;
    }
     
    declare function createModel(): AdvancedModel;
    newModel = newModel.setupBase().setupAdvanced(); // fluent style works
  • ES6 Module Emitting
    新增 module 參數,面對 Node.js v4 不支援 ES6 模組但支援 ES6 特性的情境,可以 target 參數設 es6,但模組用 commonjs。
  • ES7 Exponentiation
    ES7 規格,let cubed = 2 ** 3 –> cubed = 2 * 2 * 2,取代 Math.pow()

Type Script 1.8

  • Module Augmentation
    允許 import Module 後再擴充其介面加入新屬性、方法
  • String Literal Types ★★
    限定字串變數只能使用列舉的字串值,例如: easing: "ease-in" | "ease-out" | "ease-in-out"; 若 easing = "out" 會出現Error: Type '"out"' is not assignable to type '"ease-in" | "ease-out" | "ease-in-out"'
  • 流程分析更加智慧化
    例如:return 後馬上換行陷阱偵測,未 return 等同傳回 undefined 警告。

至於 TypeScript 2.0,台灣 MSDN 部落格有篇文章有 Beta 版的詳細介紹,這裡簡單條列:

  • --strictNullChecks 限定 string、number 等型別變數不允許被設為 null 或 undefined,除非使用 string | null 或 string[] | undefined,如必要可加上「!」排除變數為 null 或 undefined 情況以避開編譯錯誤。例如:
    let lowerCased = strs!.map(s => s.toLowerCase());
  • 編譯器能更精準掌握變數在某段程式碼位置時是什麼型別
  • 模組宣告簡化
    在 TS1.x 為描述外部程式庫,我們可能需要寫成以下宣告
    declare module "foo" {
        var x: any;
        export = x;
    }
    在 TS2.0 只要寫成 declare module "foo" 即可

2.0 RC加入的改良如下:

  • Tagged Unions ★★
    Tagged Unions(又稱為 Discriminated Unions, Disjoint Unions, 或 Algebraic Data Types)已是 F#, Swift, Rust, JavaScript 常用的設計模式。用個例子來說明,Circle 與 Square 都有 kind 屬性,但在 Circle 寫死為 "circle",在 Square 則為 "square":
    interface Circle {
        kind: "circle";
        radius: number;
    }
     
    interface Square {
        kind: "square";
        sideLength: number;
    }
     
    type Shape = Circle | Square;

    在 TS1.8 裡,取得 Shape 聯集型別(Union Type)後必須轉型成 Circle 才能取得半徑,轉成 Square 才能讀取邊長:
    function getArea(shape: Shape) {
        switch (shape.kind) {
            case "circle":
                // Convert from 'Shape' to 'Circle'
                let c = shape as Circle;
                return Math.PI * c.radius ** 2;
     
            case "square":
                // Convert from 'Shape' to 'Square'
                let sq = shape as Square;
                return sq.sideLength ** 2;
        }
    }

    TS2.0 變聰明了,知道何時 Shape 是 Circle,何時是 Square:
    function getArea(shape: Shape) {
        switch (shape.kind) {
            case "circle":
                // 'shape' is a 'Circle' here.
                return Math.PI * shape.radius ** 2;
     
            case "square":
                // 'shape' is a 'Square' here.
                return shape.sideLength ** 2;
        }
    }
  • 1.8 推出的 String Literal Type 廣受好評,2.0 再擴大到 boolean, number ★★
    type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
    let nums = Digit[];
    nums.push(16); <= 出錯,因為16不在列舉範圍內
  • tsconfig.json 支援萬用字元
    例如:
    {
        "include": [
            "./src/**/*.ts"
        ],
        "exclude": [
            "./src/tests/**"
        ]
    }

    其中:*代表0或多個非分隔符號字元、? 代表一個非分隔符號字元、**/ 代表任意層的子目錄

再補上幾條 TypeScript 2.0 革新:

  • 簡化宣告檔(d.ts)的引用程序
    在 VS Code 等應用中,使用 npm install –s @types/lodash 安裝 Scoped Package 後,在專案中遇到需要 lodash 定義時將自動找到適合的版本下載。
  • 增加 readonly 修飾字
    用法與 C# readonly 相同,只允許由建構式指定值,之後不得再變動。

註:標上 ★★的是我覺得特別好用的功能,黑大嚴選,大力推薦!

要使用 TypeScript 2.0,VS2015 必須更新到 Update 3,並安裝 TypeScript 2.0 for Visual Studio 2015;Visual Studio Code 則可透過 npm install –g typescript@2.0 安裝新版。

歡迎推文分享:
Published 24 September 2016 06:03 PM 由 Jeffrey
Filed under:
Views: 6,068



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<September 2016>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication