快速入門

筆者沒有開發(fā)web的經(jīng)驗(yàn)，對(duì)javascript也沒有學(xué)過，新項(xiàng)目，直接用TypeScript，前半部分提供給和筆者一樣，需要快速進(jìn)入項(xiàng)目的小伙伴。分割線之后，是筆者copy的覺得還不錯(cuò)的文章，供想深入了解的人參考。

一.TypeScript的優(yōu)點(diǎn)

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

• 更好的可維護(hù)性和可讀性
• 引入了靜態(tài)類型聲明，不需要太多的注釋和文檔，大部分的函數(shù)看類型定義就知道如何使用了
• 在編譯階段就能發(fā)現(xiàn)大部分因?yàn)樽兞款愋蛯?dǎo)致的錯(cuò)誤
• ...

二.安裝

npm install typescript -g

三.使用

直接像寫javascript一樣去寫，初始化的時(shí)候，需要指定類型名，沒有指定時(shí)，編譯會(huì)出錯(cuò)，有提示。所以，不了解的話，就直接寫javascript的代碼，報(bào)錯(cuò)了再改。多遇到幾次錯(cuò)誤，大抵也就明白了些。

//初始化變量的時(shí)候，需要指定類型
const ary = [] 
const data = {}

//para必須指定類型，否則會(huì)報(bào)錯(cuò)。
function testFunc(para: any) {
  .....
}

另外，使用TypeScript開發(fā)時(shí)，文件后綴要用tsx。傳統(tǒng)js和jsx與ts和tsx的區(qū)別

四. JavaScript項(xiàng)目遷移

如何你是現(xiàn)有項(xiàng)目，想該用TypeScript，那么你需要整體遷移

===============================這里是分割線==========================
原文鏈接

前言

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

什么是 TypeScript

TypeScript 也被稱作 AnyScript，因?yàn)槟阍?coding 的時(shí)候會(huì)給每個(gè)變量設(shè)一個(gè) any 的類型。

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

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

Typescript 和 JavaScript 在類型上的區(qū)別

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

function init() {
    var a = 'axuebin';
    console.log('a: ', a); // a: axuebin
    a = 1;
    console.log('a: ', a); // a: 1
}
復(fù)制代碼

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

如果在 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
復(fù)制代碼

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

這時(shí)候就會(huì)想，如果 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'.
復(fù)制代碼

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

為什么選擇 TypeScript

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

• 協(xié)同開發(fā)時(shí)，你需要調(diào)用一個(gè)其他人寫的函數(shù)，但是那個(gè)函數(shù)里變量命名和管理特別混亂，并且沒有寫任何的注釋，為了搞清楚函數(shù)的參數(shù)類型以及用法，你只能硬著頭皮讀函數(shù)的具體代碼。
• 你突然看到項(xiàng)目里自己半年前甚至一年前的一個(gè)函數(shù)，這寫的什么鬼啊，簡(jiǎn)直沒法看，強(qiáng)迫癥的你想著重構(gòu)。然后你就大刀闊斧的改造了一把，甚至對(duì)入?yún)⒍歼M(jìn)行了改造，嗯，終于滿意了。突然發(fā)現(xiàn)不對(duì)啊，還得搜了一下哪里調(diào)用了這個(gè)函數(shù)，得保證調(diào)用成功啊。
• ...

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

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

JavaScript 淡化了類型的概念，但是作為一名開發(fā)者，我們必須要牢記類型概念，養(yǎng)成良好的編程習(xí)慣。

TypeScript 的優(yōu)點(diǎn)

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

• 更好的可維護(hù)性和可讀性
• 引入了靜態(tài)類型聲明，不需要太多的注釋和文檔，大部分的函數(shù)看類型定義就知道如何使用了
• 在編譯階段就能發(fā)現(xiàn)大部分因?yàn)樽兞款愋蛯?dǎo)致的錯(cuò)誤
• ...

TypeScript 是不是能難

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

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

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

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

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

TypeScript 的困難

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

• 類型定義：對(duì)于每一個(gè)變量都需要定義它的類型，特別是對(duì)于一個(gè)對(duì)象而言，可能需要定義多層類型（這也是為什么會(huì)出現(xiàn) AnyScript 的原因。。。）
• 引用三方類庫：第三方庫如果不是 TypeScript 寫的，沒有提供聲明文件，就需要去為第三方庫編寫聲明文件
• 新概念：TypeScript 中引入的類型(Types)、類(Classes)、泛型(Generics)、接口(Interfaces)以及枚舉(Enums)，這些概念如果之前沒有接觸過強(qiáng)類型語言的話，就需要增加一些學(xué)習(xí)成本

不過，不要被嚇退了！

重要的事情要說三遍。

不要被嚇退了！！

不要被嚇退了！！!

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

安裝 TypeScript

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

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

npm install typescript -g
復(fù)制代碼

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

tsc -v
// Version 3.2.2
復(fù)制代碼

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

// index.ts
const msg: string = 'Hello TypeScript';
復(fù)制代碼

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

tsc index.ts
復(fù)制代碼

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

Hello TypeScript

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

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

• 函數(shù)有一個(gè)入?yún)ⅲ?code>string 類型的 name
• 函數(shù)有一個(gè)返回值：string 類型的 Hello ${name}

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

const me: string = 'axuebin';
console.log(sayHello(me))
復(fù)制代碼

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

function sayHello(name) {
    return "Hello " + name;
}
var me = 'axuebin';
console.log(sayHello(me));
復(fù)制代碼

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

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

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

const count: number = 1000;
console.log(sayHello(count))
復(fù)制代碼

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

index.ts:6:22 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
復(fù)制代碼

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

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

function sayHello(name) {
    return "Hello " + name;
}
var count = 1000;
console.log(sayHello(count));
復(fù)制代碼

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

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