摘要：最近開(kāi)始用來(lái)寫(xiě)項(xiàng)目，寫(xiě)起來(lái)還是挺順暢的。和在類(lèi)型上的區(qū)別被稱(chēng)作是一種動(dòng)態(tài)腳本語(yǔ)言，其中有一個(gè)被瘋狂詬病的特性缺乏靜態(tài)強(qiáng)類(lèi)型。當(dāng)然，這是可以的，此時(shí)變量的類(lèi)型已經(jīng)發(fā)生改變字符串?dāng)?shù)字。

最近開(kāi)始用 TypeScript 來(lái)寫(xiě)項(xiàng)目，寫(xiě)起來(lái)還是挺順暢的。其實(shí)學(xué)習(xí) TypeScript，看它的官方文檔就夠了，剩下就是 coding 了。我這里主要是我在 TypeScript 學(xué)習(xí)過(guò)程中記錄的一些東西~

TypeScript 也被稱(chēng)作 AnyScript，因?yàn)槟阍?coding 的時(shí)候需要為每個(gè)變量設(shè)一個(gè) any 的類(lèi)型。

咳咳，開(kāi)玩笑開(kāi)玩笑，可別真的讓每個(gè)變量都是 any，會(huì)被瘋狂吐槽的。

TypeScript 是微軟開(kāi)發(fā)一款開(kāi)源的編程語(yǔ)言，它是 JavaScript 的一個(gè)超集，本質(zhì)上是為 JavaScript 增加了靜態(tài)類(lèi)型聲明。任何的 JavaScript 代碼都可以在其中使用，不會(huì)有任何問(wèn)題。TypeScript 最終也會(huì)被編譯成 JavaScript，使其在瀏覽器、Node 中等環(huán)境中使用。

JavaScript 被稱(chēng)作是一種動(dòng)態(tài)腳本語(yǔ)言，其中有一個(gè)被瘋狂詬病的特性：缺乏靜態(tài)強(qiáng)類(lèi)型。我們看一下下面的代碼：

function init() {
    var a = "axuebin";
    console.log("a: ", a); // a: axuebin
    a = 1;
    console.log("a: ", a); // a: 1
}

當(dāng)我們執(zhí)行 init 函數(shù)的時(shí)候，會(huì)先聲明一個(gè) a 變量，然后給 a 變量賦了一個(gè) axuebin，這時(shí)候我們知道 a 是一個(gè)字符串。然后這時(shí)候我們希望 a 變成 1，就直接 a = 1 了。當(dāng)然，這是可以的，此時(shí) a 變量的類(lèi)型已經(jīng)發(fā)生改變：字符串 => 數(shù)字。這在很多人看來(lái)是難以接受的事情，明明初始化 a 的時(shí)候是一個(gè)字符串類(lèi)型，之后 a 的類(lèi)型居然變成數(shù)字類(lèi)型了，這太糟糕了。

如果在 Java 中，會(huì)是這樣：

class HelloWorld {
    public static void main(String[] args) {
        String a = "axuebin";
        System.out.printf("a: %s", a);
        a = 1;
        System.out.printf("a: %d", a);
    }
}

// HelloWorld.java:4: error: incompatible types: int cannot be converted to String

在 Java 中根本就沒(méi)辦法讓 a = 1，會(huì)直接導(dǎo)致報(bào)錯(cuò)，在編譯階段就斷絕你的一切念想。年輕人，別想太多，好好寫(xiě)代碼。

這時(shí)候就會(huì)想，如果 JavaScript 也有類(lèi)型該有多好啊，是吧。

看看 TypeScript 中是怎么樣的：

function init() {
    var a: string = "axuebin";
    console.log("a: ", a); 
    a = 1;
    console.log("a: ", a);
}

// Type "1" is not assignable to type "string".

我們把變量 a 設(shè)為 string 類(lèi)型，后面給 a 復(fù)制 1 的時(shí)候就報(bào)錯(cuò)了，同樣是在編譯階段就過(guò)不了。

我們來(lái)想想在日常的業(yè)務(wù)開(kāi)發(fā)中是否有遇到以下的情況：

協(xié)同開(kāi)發(fā)時(shí)，你需要調(diào)用一個(gè)其他人寫(xiě)的函數(shù)，但是那個(gè)函數(shù)里變量命名和管理特別混亂，并且沒(méi)有寫(xiě)任何的注釋?zhuān)瑸榱烁闱宄瘮?shù)的參數(shù)類(lèi)型以及用法，你只能硬著頭皮都函數(shù)的具體代碼。

你突然看到項(xiàng)目里自己半年前甚至一年前的一個(gè)函數(shù)，這寫(xiě)的什么鬼啊，簡(jiǎn)直沒(méi)法看，強(qiáng)迫癥的你想著重構(gòu)一把。然后你就大刀闊斧的改造了一把，甚至對(duì)入?yún)⒍歼M(jìn)行了改造，嗯，終于滿(mǎn)意了。突然發(fā)現(xiàn)不對(duì)啊，還得搜了一下哪里調(diào)用了這個(gè)函數(shù)，得保證調(diào)用成功啊。

...

是不是超級(jí)超級(jí)超級(jí)不爽。歸根結(jié)底這還是因?yàn)?JavaScript 是一門(mén)動(dòng)態(tài)弱類(lèi)型腳本語(yǔ)言。

你想想，如果每個(gè)變量都被約定了類(lèi)型，并且構(gòu)建了變量聲明和變量調(diào)用之前的聯(lián)系，只要有一處地方發(fā)生了改變，其它地方都會(huì)被通知到，這該有多美好。

JavaScript 淡化了類(lèi)型的概念，但是作為一名開(kāi)發(fā)者，我們必須要牢固自己的類(lèi)型概念，養(yǎng)成良好的變成習(xí)慣。

TypeScript 相比于 JavaScript 具有以下優(yōu)勢(shì)：

更好的可維護(hù)性和可讀性

引入了靜態(tài)類(lèi)型聲明，不需要太多的注釋和文檔，大部分的函數(shù)看類(lèi)型定義就知道如何使用了

在編譯階段就能發(fā)現(xiàn)大部分因?yàn)樽兞款?lèi)型導(dǎo)致的錯(cuò)誤

...

有的童鞋可能會(huì)覺(jué)得，JavaScript 都還沒(méi)學(xué)清楚，又得學(xué)一門(mén)新的編程語(yǔ)言，還沒(méi)接觸 TypeScript 就已經(jīng)無(wú)形中有了抵觸心理。對(duì)于這些童鞋，需要知道的是 TypeScript 是 JavaScript 的超集，與現(xiàn)存的 JavaScript 代碼有非常高的兼容性。

如果一個(gè)集合S2中的每一個(gè)元素都在集合S1中，且集合S1中可能包含S2中沒(méi)有的元素，則集合S1就是S2的一個(gè)超集。

也就是說(shuō)，TypeScript 包含了 JavaScript 的 all，即使是僅僅將 .js 改成 .ts，不修改任何的代碼都可以運(yùn)行。

所以說(shuō)，完全可以先上手再學(xué)習(xí)，漸進(jìn)式地搞定 TypeScript，不用擔(dān)心門(mén)檻高的問(wèn)題。

如果還有顧慮，可以在 http://www.typescriptlang.org/play/ 上先體驗(yàn)一下 TypeScript 帶來(lái)的快感。

當(dāng)然，上手 TypeScript 也會(huì)有一些困難，會(huì)讓剛開(kāi)始學(xué)習(xí) TypeScript 的童鞋感覺(jué)太復(fù)雜了，不熟悉的情況下很可能會(huì)增加開(kāi)發(fā)成本：

類(lèi)型定義：對(duì)于每一個(gè)變量都需要定義它的類(lèi)型，特別是對(duì)于一個(gè)對(duì)象而言，可能需要定義多層類(lèi)型（這也是為什么會(huì)出現(xiàn) AnyScript 的原因。。。）

引用三方類(lèi)庫(kù)：第三方庫(kù)如果不是 TypeScript 寫(xiě)的，沒(méi)有提供聲明文件，就需要去為第三方庫(kù)編寫(xiě)聲明文件

新概念：TypeScript 中引入的類(lèi)型(Types)、類(lèi)(Classes)、泛型(Generics)、接口(Interfaces)以及枚舉(Enums)，這些概念如果之前沒(méi)有接觸過(guò)強(qiáng)類(lèi)型語(yǔ)言的話(huà)，就需要增加一些學(xué)習(xí)成本

不過(guò)，不要被嚇退了！

重要的事情要說(shuō)三遍。

不要被嚇退了?。?/p>

不要被嚇退了??！!

這些只是短期的，當(dāng)克服這些困難后，就會(huì)如魚(yú)得水，一切看上去都是那么的自然。

首先你需要有 Node 和 npm，這個(gè)不用多說(shuō)了。

在控制臺(tái)運(yùn)行一下命令：

npm install typesrcipt -g

這條命令會(huì)在全局安裝 typescript，并且安裝 tsc 命令，運(yùn)行以下命令可以查看當(dāng)前版本（確認(rèn)安裝成功）：

tsc -v
// Version 3.2.2

然后我們就新建一個(gè)名為 index.ts 的文件，然后敲入簡(jiǎn)單點(diǎn)的代碼：

// index.ts
const msg: string = "Hello TypeScript";

代碼編寫(xiě)好就可以執(zhí)行編譯，可以運(yùn)行 tsc 命令，讓 ts 文件變成可在瀏覽器中運(yùn)行的 js 文件：

tsc index.ts

如果你的代碼不合法，執(zhí)行 tsc 的時(shí)候就會(huì)報(bào)錯(cuò)，根據(jù)錯(cuò)誤進(jìn)行對(duì)應(yīng)的修改即可。

我們看一個(gè)稍微完整點(diǎn)的例子吧。

這是一個(gè) ts 文件，聲明了一個(gè) sayHello 函數(shù)：

函數(shù)有一個(gè)入?yún)ⅲ?b>string 類(lèi)型的 name

函數(shù)有一個(gè)返回值：string 類(lèi)型的 Hello ${name}

// index.ts
function sayHello(name: string): string {
    return `Hello ${name}`;
}

const me: string = "axuebin";
console.log(sayHello(me))

我們執(zhí)行 tsc index.ts 編譯一下，在同級(jí)文件夾下生成了一個(gè)新的文件 index.js：

function sayHello(name) {
    return "Hello " + name;
}
var me = "axuebin";
console.log(sayHello(me));

我們發(fā)現(xiàn)我們寫(xiě)的 TypeScript 代碼在編譯后都消失了。因?yàn)?TypeScript 只會(huì)進(jìn)行靜態(tài)檢查，如果代碼有問(wèn)題，在編譯階段就會(huì)報(bào)錯(cuò)。

我們修改一下 index.ts ，模擬一下出錯(cuò)的情況：

function sayHello(name: string): string {
    return `Hello ${name}`;
}

const count: number = 1000;
console.log(sayHello(count))

我們向 sayHello 傳遞一個(gè) number 類(lèi)型的參數(shù)，試試 tsc 一下：

index.ts:6:22 - error TS2345: Argument of type "number" is not assignable to parameter of type "string".

命令行就會(huì)報(bào)上面的錯(cuò)誤，意思是不能給一個(gè) string 類(lèi)型的參數(shù)傳遞一個(gè) number 類(lèi)型。

但是，這里要注意的是，即使報(bào)錯(cuò)了，tsc 還是會(huì)將編譯進(jìn)行到底，還是會(huì)生成一個(gè) index.js 文件：

function sayHello(name) {
    return "Hello " + name;
}
var count = 1000;
console.log(sayHello(count));

看上去也就是沒(méi)啥毛病的 js 代碼。

如果編譯失敗就不生成 js 文件，之后可以在配置中關(guān)閉這個(gè)功能。

如果沒(méi)有意外的話(huà)，應(yīng)該會(huì)繼續(xù)寫(xiě)一些 TypeScript 的文章，歡迎大家持續(xù)關(guān)注~

博客地址：https://github.com/axuebin/articles