TypeScript Start: 什麼是 TypeScript

最近開始用 TypeScript 來寫項目，寫起來仍是挺順暢的。其實學習 TypeScript，看它的官方文檔就夠了，剩下就是 coding 了。我這裏主要是我在 TypeScript 學習過程當中記錄的一些東西~

什麼是 TypeScript

TypeScript 也被稱做 AnyScript，由於你在 coding 的時候須要爲每一個變量設一個 any 的類型。

咳咳，開玩笑開玩笑，可別真的讓每一個變量都是 any，會被瘋狂吐槽的。

TypeScript 是微軟開發一款開源的編程語言，它是 JavaScript 的一個超集，本質上是爲 JavaScript 增長了靜態類型聲明。任何的 JavaScript 代碼均可以在其中使用，不會有任何問題。TypeScript 最終也會被編譯成 JavaScript，使其在瀏覽器、Node 中等環境中使用。

Typescript 和 JavaScript 在類型上的區別

JavaScript 被稱做是一種動態腳本語言，其中有一個被瘋狂詬病的特性：缺少靜態強類型。咱們看一下下面的代碼：

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

當咱們執行 init 函數的時候，會先聲明一個 a 變量，而後給 a 變量賦了一個 axuebin，這時候咱們知道 a 是一個字符串。而後這時候咱們但願 a 變成 1，就直接 a = 1 了。固然，這是能夠的，此時 a 變量的類型已經發生改變：字符串 => 數字。這在不少人看來是難以接受的事情，明明初始化 a 的時候是一個字符串類型，以後 a 的類型竟然變成數字類型了，這太糟糕了。

若是在 Java 中，會是這樣：

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 中根本就沒辦法讓 a = 1，會直接致使報錯，在編譯階段就斷絕你的一切念想。年輕人，別想太多，好好寫代碼。

這時候就會想，若是 JavaScript 也有類型該有多好啊，是吧。

看看 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 設爲 string 類型，後面給 a 複製 1 的時候就報錯了，一樣是在編譯階段就過不了。

爲何選擇 TypeScript

咱們來想一想在平常的業務開發中是否有遇到如下的狀況：

• 協同開發時，你須要調用一個其餘人寫的函數，可是那個函數裏變量命名和管理特別混亂，而且沒有寫任何的註釋，爲了搞清楚函數的參數類型以及用法，你只能硬着頭皮都函數的具體代碼。
• 你忽然看到項目裏本身半年前甚至一年前的一個函數，這寫的什麼鬼啊，簡直無法看，強迫症的你想着重構一把。而後你就大刀闊斧的改造了一把，甚至對入參都進行了改造，嗯，終於滿意了。忽然發現不對啊，還得搜了一下哪裏調用了這個函數，得保證調用成功啊。
• ...

是否是超級超級超級不爽。歸根結底這仍是由於 JavaScript 是一門動態弱類型腳本語言。

你想一想，若是每一個變量都被約定了類型，而且構建了變量聲明和變量調用以前的聯繫，只要有一處地方發生了改變，其它地方都會被通知到，這該有多美好。

JavaScript 淡化了類型的概念，可是做爲一名開發者，咱們必需要牢固本身的類型概念，養成良好的變成習慣。

TypeScript 的優勢

TypeScript 相比於 JavaScript 具備如下優點：

• 更好的可維護性和可讀性
• 引入了靜態類型聲明，不須要太多的註釋和文檔，大部分的函數看類型定義就知道如何使用了
• 在編譯階段就能發現大部分由於變量類型致使的錯誤
• ...

TypeScript 是否是能難

有的童鞋可能會以爲，JavaScript 都還沒學清楚，又得學一門新的編程語言，還沒接觸 TypeScript 就已經無形中有了抵觸心理。對於這些童鞋，須要知道的是 TypeScript 是 JavaScript 的超集，與現存的 JavaScript 代碼有很是高的兼容性。

若是一個集合S2中的每個元素都在集合S1中，且集合S1中可能包含S2中沒有的元素，則集合S1就是S2的一個超集。

也就是說，TypeScript 包含了 JavaScript 的 all，即便是僅僅將 .js 改爲 .ts，不修改任何的代碼均可以運行。

因此說，徹底能夠先上手再學習，漸進式地搞定 TypeScript，不用擔憂門檻高的問題。

若是還有顧慮，能夠在 http://www.typescriptlang.org/play/ 上先體驗一下 TypeScript 帶來的快感。

TypeScript 的困難

固然，上手 TypeScript 也會有一些困難，會讓剛開始學習 TypeScript 的童鞋感受太複雜了，不熟悉的狀況下極可能會增長開發成本：

• 類型定義：對於每個變量都須要定義它的類型，特別是對於一個對象而言，可能須要定義多層類型（這也是爲何會出現 AnyScript 的緣由。。。）
• 引用三方類庫：第三方庫若是不是 TypeScript 寫的，沒有提供聲明文件，就須要去爲第三方庫編寫聲明文件
• 新概念：TypeScript 中引入的類型(Types)、類(Classes)、泛型(Generics)、接口(Interfaces)以及枚舉(Enums)，這些概念若是以前沒有接觸過強類型語言的話，就須要增長一些學習成本

不過，不要被嚇退了！

重要的事情要說三遍。

不要被嚇退了！！

不要被嚇退了！！!

這些只是短時間的，當克服這些困難後，就會如魚得水，一切看上去都是那麼的天然。

安裝 TypeScript

首先你須要有 Node 和 npm，這個不用多說了。

在控制檯運行一下命令：

npm install typesrcipt -g

這條命令會在全局安裝 typescript，而且安裝 tsc 命令，運行如下命令能夠查看當前版本（確認安裝成功）：

tsc -v
// Version 3.2.2

而後咱們就新建一個名爲 index.ts 的文件，而後敲入簡單點的代碼：

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

代碼編寫好就能夠執行編譯，能夠運行 tsc 命令，讓 ts 文件變成可在瀏覽器中運行的 js 文件：

tsc index.ts

若是你的代碼不合法，執行 tsc 的時候就會報錯，根據錯誤進行對應的修改便可。

Hello TypeScript

咱們看一個稍微完整點的例子吧。

這是一個 ts 文件，聲明瞭一個 sayHello 函數：

• 函數有一個入參：string 類型的 name
• 函數有一個返回值：string 類型的 Hello ${name}

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

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

咱們執行 tsc index.ts 編譯一下，在同級文件夾下生成了一個新的文件 index.js：

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

咱們發現咱們寫的 TypeScript 代碼在編譯後都消失了。由於 TypeScript 只會進行靜態檢查，若是代碼有問題，在編譯階段就會報錯。

咱們修改一下 index.ts ，模擬一下出錯的狀況：

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

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

咱們向 sayHello 傳遞一個 number 類型的參數，試試 tsc 一下：

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

命令行就會報上面的錯誤，意思是不能給一個 string 類型的參數傳遞一個 number 類型。

可是，這裏要注意的是，即便報錯了，tsc 仍是會將編譯進行到底，仍是會生成一個 index.js 文件：

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

看上去也就是沒啥毛病的 js 代碼。

若是編譯失敗就不生成 js 文件，以後能夠在配置中關閉這個功能。

寫在最後

若是沒有意外的話，應該會繼續寫一些 TypeScript 的文章，歡迎你們持續關注~

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