讓前端的子彈飛-TypeScript

Jeff Atwood定律

JavaScript弊端

然而，儘管JavaScript如此火，幾乎扛下了網際網路應用的半壁江山，但在語言設計上卻飽受詬病，正如Node 之父 Ryan Dahl所說的Node設計缺陷一樣，其中也涉及到了JavaScript的短板，要不然他也不會在新服務端框架Deno中使用TypeScript作為主要語言。

冥冥中自有定數，Deno也許未必能替代Node，尤其是在Node已經誕生10年，早已是前端工程化中流砥柱的工具，全世界也有無數個執行中的服務端應用；而Deno此時此刻卻仍然是Demo。但TypeScript必將從此一振，此時此刻，也許不是學習Deno的最佳時機，但一定是學習TypeScript的最佳時機。JavaScript開發者必將迎來一個嶄新的時代，開啟構建大型應用的新時代。

踩過的坑

曾幾何時，我們在開發除錯過程中不知道踩過了多少坑，無數次激昂澎湃地面對專案程式碼重構卻望而卻步，因為你不確定弱型別的JavaScript程式碼究竟埋藏了多少地雷，也許正是你親手埋下的。

JavaScript的函式可以接受任意型別的引數，看起來很靈活，但一不小心就讓我們陷入排查Bug的地獄中。

function func(anything) {
    return;
}
複製程式碼

像Java這樣的強型別語言，如果引數不是特定的型別就會報錯，雖然在定義變數時有些繁瑣，但確實能夠在很大程度上避免很多低階卻很隱蔽的Bug。

TypeScript的問世

鑑於以上問題，TypeScript橫空出世，TypeScript是JavaScript的超集，遵循最新的ES6規範，彌補了JavaScript在大型應用開發中的不足。TypeScript在靜態型別檢查、程式碼重構和語言服務方面的優勢十分明顯，而這些正好是JavaScript的劣勢。

除此之外，在前端面試過程中經常會考一些JavaScript型別轉換的黑魔法，如+String型別可以轉換成Number型別。我個人認為就算這樣程式碼十分精簡，也是不應該提倡使用的，因為這以犧牲程式碼可讀性和可維護性為代價，讓許久之後的重構變得有心無力、如履薄冰。

以弱型別語言著稱的JavaScript在字串、數字和日期等型別直接的隱式型別轉換讓流入和流出函式的物件型別變得無法窺視，導致在團隊開發過程中，強調撰寫程式碼註釋成為家常便飯的事情，對程式碼進行註釋變得極其重要，否則團隊新成員很難立即接手專案。

TypeScript可以很好地解決這個問題，你不需要再單獨提交一份文件進行詳細地解釋程式碼，TypeScript可以清楚地記錄每一個物件的屬性、方法的引數等。

TypeScript基本介紹

TypeScript支援與JavaScript幾乎相同的資料型別，此外還提供了實用的列舉型別方便我們使用。

• 布林值

let isDone: boolean = false;

• 數字

let decLiteral: number = 6;

• 字串

let name: string = "bob";

• 陣列

let list: number[] = [1, 2, 3];

• 元組 Tuple

let x: [string, number];

• 列舉

enum Color {Red, Green, Blue}

• 任意值

let notSure: any = 4;

• 空值

function warnUser(): void {

alert("This is my warning message");

}

let unusable: void = undefined;

• Null 和 Undefined

let u: undefined = undefined;

let n: null = null;

• Never

function infiniteLoop(): never {

while (true) {

}

}

• Object

declare function create(o: object | null): void;

聯合型別，又可以稱之為選擇型別，只要滿足其一便可。

let age: number | string;

類，類是TS的核心，使用TS開發時，大部分程式碼都是寫在類裡面的。

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
複製程式碼

更進一步，類有公共，私有與受保護的修飾符。

class Person {
    public name: string;
    private age: number;
    public constructor(theName: string) { this.name = theName; }
    protected move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
複製程式碼

• public 公有 任何人可以訪問

• private 私有 只有類內部可以訪問

• protected 受保護 只有子類能用

介面Interface，介面的作用就是為這些型別命名和為你的程式碼或第三方程式碼定義契約。

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});
複製程式碼

其中“？”表示可選引數。

function test(a:string, b?:string, c:"ctz"){
    console.log(a);
    console.log(b);
    console.log(c);
}
複製程式碼

泛型，在像C#和Java這樣的語言中，可以使用泛型來建立可重用的元件，一個元件可以支援多種型別的資料。 這樣使用者就可以自定義資料型別來使用元件。

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;
複製程式碼

class Calc<T> {
    a: T;
    b: T;
}
複製程式碼

TypeScript的未來

總之，對於Javascript來說，TypeScript就像超時代的自己！

隨著技術的發展，JavaScript終會向著TypeScript的方向看齊，屆時我們能更加遊刃有餘地開發超大型應用。

在未來，我相信，任何能用JavaScript實現的應用，終將使用TypeScript寫成。

“ Any application that can be written in JavaScript，will eventually be written in TypeScript. ”

本文只是拋磚引玉，更多關於TypeScript的用法還需要大家在實踐中自己去探索和慢慢積累。

TypeScript官方文件地址：http://www.typescriptlang.org/docs/home.html。

本文作者：黑馬大前端 cuitianze