讓前端的子彈飛-TypeScript

「 Any application that can be written in JavaScript，will eventually be written in JavaScript. 」

-- Jeff Atwood 2007

「 前端，文也；
後端，武也；
全棧，文武雙全者也；
前端全棧者，涉獵甚廣，
文可交互，武可併發，
硬件編程，更添異彩。
吾乃前端門下後生之輩，時值太學二年，拜入星辰門下，
研修前端之術，數年以來，前端招式變化之快，
羣雄割據，框架紛爭，
三國鼎立者，Angular、React、Vue，吾惶恐不及，
09年始，NodeJS中途島登錄，攻城略地，
超炫3D，WebVR，歎爲觀止。
古人有云，習前端者，足以立天下。 」

-- cuitianze 2016

本文開篇同時引用了編程界大牛和菜鳥的語錄來"大肆"宣揚前端的地位，不，不止於前端，咱們的真正名字應該叫JavaScript開發者，「前端」是歷史遺留下的誤解，亦或是在工做崗位中被侷限於的小小領域。

01

—

Jeff Atwood定律

那麼2007年提出震驚中外的「Atwood定律」的Jeff Atwood何許人也？他即是叱吒編程界的StackOverflow創始人。

原博客連接以下：https://blog.codinghorror.com/the-principle-of-least-power/。

Jeff Atwood定律的由來：JavaScript既能獨立完成全部互聯網應用所需的功能開發，同時又是主流編程語言中最爲輕量級的。

02

—

JavaScript應用場景

JavaScript雖然不是萬能的，但他卻能運行在咱們所指望能運行的任何地方，譬如：

• 你的瀏覽器上（幾乎全部的瀏覽器，估計不支持的瀏覽器早已消逝在歷史長河中）；

• 你的手機和平板電腦（如React Native，Weex，Cordova）;

• 你的桌面應用（如Electron、NW.js能夠橫跨Mac、Windows、Linux三大主流操做系統）;

• 你的服務器上運行着NodeJS甚至最近剛推出的讓人學不動了的Deno。

不只如此，目前最高流量入口的微信小程序和支付寶小程序的開發語言全都是JavaScript，硬件編程語言中JavaScript也佔得了一席之地，區塊鏈應用開發中JavaScript也是不可或缺的一環。

03

—

JavaScript弊端

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

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

04

—

踩過的坑

曾幾什麼時候，咱們在開發調試過程當中不知道踩過了多少坑，無數次激昂澎湃地面對項目代碼重構卻望而卻步，由於你不肯定弱類型的JavaScript代碼究竟埋藏了多少地雷，也許正是你親手埋下的。

JavaScript的函數能夠接受任意類型的參數，看起來很靈活，但一不當心就讓咱們陷入排查Bug的地獄中。

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

像Java這樣的強類型語言，若是參數不是特定的類型就會報錯，雖然在定義變量時有些繁瑣，但確實可以在很大程度上避免不少低級卻很隱蔽的Bug。

05

—

TypeScript的問世

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

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

以弱類型語言著稱的JavaScript在字符串、數字和日期等類型直接的隱式類型轉換讓流入和流出函數的對象類型變得沒法窺視，致使在團隊開發過程當中，強調撰寫代碼註釋成爲屢見不鮮的事情，對代碼進行註釋變得極其重要，不然團隊新成員很難當即接手項目。

TypeScript能夠很好地解決這個問題，你不須要再單獨提交一份文檔進行詳細地解釋代碼，TypeScript能夠清楚地記錄每個對象的屬性、方法的參數等。

06

—

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;
}
複製代碼

07

—

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