TypeScript 初識

時間 2019-12-04

標籤 typescript 简体版

原文原文鏈接

文章博客地址：http://pinggod.com/2016/Typescript/javascript

TypeScript 是 JavaScript 的超集，爲 JavaScript 的生態增長了類型機制，並最終將代碼編譯爲純粹的 JavaScript 代碼。類型機制很重要嗎？最近的一些項目經歷讓我以爲這真的很重要。當你陷在一箇中大型項目中時（Web 應用日趨成爲常態），沒有類型約束、類型推斷，總有種牽一髮而動全身的危機和束縛。Immutable.js 和 Angular 2 都在使用 TypeScript 作開發，它們都是體量頗大的項目，因此我決定嘗試一下 Typescript。此外咱們還能夠嘗試 Facebook 的 Flow，比較一下二者的優劣。Typescript 對 ES6 也有良好的支持，目前組內項目使用 Babel 編譯 ES6，這也就天然而然的把 TypeScirpt 和 Flow / babel-plugin-tcomb 放在了對立面，也許下一篇文章就是介紹 Flow 和 babel-plugin-tcomb。html

What and Why

若是你想對 TypeScript 有更深刻的認識，那麼推薦你閱讀 Stack Overflow 上的問答 What is TypeScript and why would I use it in place of JavaScript? ，這一節也是對這篇問答的一個簡述。java

雖然 JavaScript 是 ECMAScript 規範的標準實現，但並非全部的瀏覽器都支持最新的 ECAMScript 規範，這也就限制了開發者使用最新的 JavaScript / ECMAScript 特性。TypeScript 一樣支持最新的 ECMAScript 標準，並能將代碼根據需求轉換爲 ES 3 / 5 / 6，這也就意味着，開發者隨時可使用最新的 ECMAScript 特性，好比 module / class / spread operator 等，而無需考慮兼容性的問題。ECMAScript 所支持的類型機制很是豐富，包括：interface、enum、hybird type 等等。react

與 TypeScript 類似的工具語言還有不少，它們主要分爲兩個陣營，一個是相似 Babel 的陣營，以 JavaScript 的方式編寫代碼，致力於爲開發者提供最新的 ECMAScript 特性並將代碼編譯爲兼容性的代碼；另外一個則是 Coffeescript、Clojure、Dart 等的陣營，它們的語法與 JavaScript 迥然不一樣，但最終會編譯爲 JavaScript。TypeScript 在這二者之間取得了一種平衡，它既爲 JavaScript 增長了新特性，也保持了對 JavaScript 代碼的兼容，開發者幾乎能夠直接將 .js 文件重命名爲 .ts 文件，就可使用 TypeScript 的開發環境，這種作法一方面能夠減小開發者的遷移成本，一方面也可讓開發者快速上手 TypeScript。webpack

JavaScript 是一門解釋型語言，變量的數據類型具備動態性，只有執行時才能肯定變量的類型，這種後知後覺的認錯方法會讓開發者成爲調試大師，但無益於編程能力的提高，還會下降開發效率。TypeScript 的類型機制能夠有效杜絕由變量類型引發的誤用問題，並且開發者能夠控制對類型的監控程度，是嚴格限制變量類型仍是寬鬆限制變量類型，都取決於開發者的開發需求。添加類型機制以後，反作用主要有兩個：增大了開發人員的學習曲線，增長了設定類型的開發時間。整體而言，這些付出相對於代碼的健壯性和可維護性，都是值得的。git

目前主流的 IDE 都爲 TypeScript 的開發提供了良好的支持，好比 Visual Studio / VS Code、Atom、Sublime 和 WebStorm。TypeScript 與 IDE 的融合，便於開發者實時獲取類型信息。舉例來講，經過代碼補全功能能夠獲取代碼庫中其餘函數的信息；代碼編譯完成後，相關信息或錯誤信息會直接反饋在 IDE 中……github

在即將發佈的 TypeScript 2.0 版本中，將會有許多優秀的特性，好比對 null 和 undefined 的檢查。cannot read property 'x' of undefined 和 undefined is not a function 在 JavaScript 中是很是常見的錯誤。在 TypeScript 2.0 中，經過使用 non-nullable 類型能夠避免此類錯誤：let x : number = undefined 會讓編譯器提示錯誤，由於 undefined 並非一個 number，經過 let x : number | undefined = undefined 或 let x : number? = undefined 可讓 x 是一個 nullable（undefined 或 null）的值。若是一個變量的類型是 nullable，那麼 TypeScript 編譯器就能夠經過控制流和類型分析來斷定對變量的使用是否安全：web

let x : number?;
if (x !== undefined)
    // this line will compile, because x is checked.
    x += 1;

// this line will fail compilation, because x might be undefined.    
x += 1;

TypeScript 編譯器既能夠將 source map 信息置於生成的 .js 文件中，也能夠建立獨立的 .map 文件，便於開發者在代碼運行階段設置斷點、審查變量。此外，TypeScript 還可使用 decorator 攔截代碼，爲不一樣的模塊系統生成模塊加載代碼，解析 JSX 等。typescript

Usage

這一節介紹 TypeScirpt 的一些基礎特性，算是拋磚引玉，但願引發你們嘗試和使用 TypeScript 的興趣。首先，從最簡單的類型標註開始：編程

// 原始值
const isDone: boolean = false;
const amount: number = 6;
const address: string = 'beijing';
const greeting: string = `Hello World`;

// 數組
const list: number[] = [1, 2, 3];
const list: Array<number> = [1, 2, 3];

// 元組
const name: [string, string] = ['Sean', 'Sun'];

// 枚舉
enum Color {
    Red,
    Green,
    Blue
};
const c: Color = Color.Green;

// 任意值：能夠調用任意方法
let anyTypes: any = 4;
anyTypes = 'any';
anyTypes = false

// 空值
function doSomething (): void {
    return undefined;
}

// 類型斷言
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

TypeScript 中的 Interface 能夠看作是一個集合，這個集合是對對象、類等內部結構的約定：

// 定義接口 Coords
// 該接口包含 number 類型的 x，string 類型的 y
// 其中 y 是可選類型，便是否包含該屬性無所謂
interface Coords {
    x: number;
    y?: string;
};

// 定義函數 where
// 該函數接受一個 Coords 類型的參數 l
function where (l: Coords) {
    // doSomething
}

const a = { x: 100 };
const b = { x: 100, y1: 'abc' };

// a 擁有 number 類型的 x，能夠傳遞給 where
where(a);
// b 擁有 number 類型的 x 和 string 類型的 y1，能夠傳遞給 where
where(b);

// 下面這種調用方式將會報錯，雖然它和 where(b) 看起來是一致的
// 區別在於這裏傳遞的是一個對象字面量
// 對象字面量會被特殊對待並通過額外的屬性檢查
// 若是對象字面量中存在目標類型中未聲明的屬性，則拋出錯誤
where({ x: 100, y1: 'abc' });

// 最好的解決方式是爲接口添加索引簽名
// 添加以下所示的索引簽名後，對象字面量能夠有任意數量的屬性
// 只要屬性不是 x 和 y，其餘屬性能夠是 any 類型
interface Coords {
    x: number;
    y?: string;
    [propName: string]: any
};

上面的代碼演示了接口對對象的約束，此外，接口還經常使用於約束函數的行爲：

// CheckType 包含一個調用簽名
// 該調用簽名聲明瞭 getType 函數須要接收一個 any 類型的參數，並最終返回一個 string 類型的結果
interface CheckType {
    (data: any): string;
};

const getType: CheckType = (data: any) : string => {
    return Object.prototype.toString.call(data);
}

getType('abc');
// => '[object String]'

與老牌強類型語言 C#、Java 相同的是，Interface 也能夠用於約束類的行爲：

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick();
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

class

除了 ES6 增長的 Class 用法，TypeScript 還增長了 C++、Java 中常見的 public / protected / private 限定符，限定變量或函數的使用範圍。TypeScript 使用的是結構性類型系統，只要兩種類型的成員類型相同，則認爲這兩種類型是兼容和一致的，但比較包含 private 和 protected 成員的類型時，只有他們是來自同一處的統一類型成員時纔會被認爲是兼容的：

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

class Rhino extends Animal {
    constructor() { super("Rhino"); }
}

class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");

animal = rhino;
// Error: Animal and Employee are not compatible
animal = employee;

抽象類是供其餘類繼承的基類，與接口不一樣的是，抽象類能夠包含成員方法的實現細節，但抽不能夠包含抽象方法的實現細節：

abstract class Animal {
    // 抽象方法
    abstract makeSound(): void;
    // 成員方法
    move(): void {
        console.log('roaming the earch...');
    }
}

function

添加類型機制的 TypeScript 在函數上最能夠秀的一塊就是函數重載了：

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
let pickedCard2 = pickCard(15);

console.log("card: " + pickedCard1.card + " of " + pickedCard1.suit);
console.log("card: " + pickedCard2.card + " of " + pickedCard2.suit);

編譯器首先會嘗試匹配第一個函數重載的聲明，若是類型匹配成功就執行，不然繼續匹配其餘的重載聲明，所以參數的針對性越強的函數重載，越要靠前聲明。

genrics

function identity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

let myIdentity: {<T>(arg: T[]): T[]} = identity;

上面的代碼展現了泛型的基本用法，這裏的 <T> 稱爲泛型變量，經過這個聲明，咱們能夠肯定傳入的參數類型和返回的數據類型是一致的，一旦肯定了傳入的參數類型，也就肯定了返回的數據類型。myIdentity 使用了帶有調用簽名的對象字面量定義泛型函數，實際上能夠結合接口，寫出更簡潔的泛型接口：

interface IdentityFn {
     <T>(arg: T[]): T[];
};

let myIdentity: IdentityFn = identity;

若是同一個泛型變量在接口中被反覆使用，那麼能夠在定義接口名的同時聲明泛型變量：

interface IdentityFn<T> {
    (arg: T[]): T[];
};

function identity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

let myIdentity: IdentityFn<string> = identity;

在泛型接口以外，還可使用泛型類，二者的形式很是相似：

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

泛型也能夠直接繼承接口約束本身的行爲：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

type inference

TypeScript 主要有兩種類型推斷方式：Best Common Type 和 Contextual Type。咱們先介紹 Best Common Type:

let x = [0, 1, null];

對於上面代碼中的變量 x，若是要推斷出它的類型，就必須充分考慮 [0, 1, null] 的類型，因此這裏進行類型推斷的順序是從表達式的葉子到根的，也就是先推斷變量 x 的值都包含什麼類型，而後總結出 x 的類型，是一種從下往上的推斷過程。

TypeScript 的類型推論也能夠按照從上往下的順序進行，這被稱爲 Contextual Type：

window.onmousedown = function(mouseEvent) {
    // Error: Property 'button' does not exist ontype 'MouseEvent'
    console.log(mouseEvent.buton);  
};

在上面的示例中，TypeScript 類型推斷機制會經過 window.onmousedown 函數的類型來推斷右側函數表達式的類型，繼而推斷出 mouseEvent 的類型，這種從上到下的推斷順序就是 Contextual Type 的特徵。

這裏只對 TypeScript 的特性作簡單的介紹，更詳細的資料請參考如下資料：

React and Webpack

在 TypeScript 中開發 React 時有如下幾點注意事項：

對 React 文件使用 .tsx 的擴展名
在 tsconfig.json 中使用 compilerOptions.jsx: 'react'
使用 typings 類型定義

interface Props {
    foo: string;
}

class MyComponent extends React.Component<Props, {}> {
    render() {
        return <span>{this.props.foo}</span>
    }
}

<MyComponent foo="bar" />; // 正確

TypeScript 的官方文檔中對 React 的開發作了一個簡單的演示，主要包含如下幾個部分：