我爲何要用TypeScript？花五分鐘上手教程

最近TypeScript大火，Node.js裏很多有名的開源項目都開始支持，隱約有一統江湖的氣勢，若是說哪天Node.js能直接運行TypeScript我也不會太過驚訝。

因此，我前段時間開始嘗試使用這種「新寫法」，不久後便決定，從此不管大小項目都會用TypeScript來寫。接下來我會說說個人理由，和TypeScript從此的前景，最後附上五分鐘上手教程。

1.TypeScript的好處

TypeScript解決了JavaScript的一大痛點，那就是動態類型。

JavaScript的動態類型簡單、靈活，寫起來很爽，可是不適用於大型項目，代碼一多會難以維護，尤爲是看別人的代碼。而TypeScript則採用了靜態類型，寫法上雖然麻煩點，可是換來了更穩固的結構和清晰的邏輯。

而且在宇宙第一IDE VSCode的支持下，類型檢查和提示都很是強大，大大減小了開發階段出錯的機率，配合上貼心的智能提示，今後代碼一遍過再也不是夢想。

這讓我想起了一個段子，一名程序員寫完代碼後運行，居然沒有BUG一遍就過，心情激動下打電話給女友告訴她這件事，女友聽完後只是冷淡地」哦「了一聲。因此，這個故事告訴咱們，不要找女友。

而對於小項目來講，類型檢查可能不那麼重要，可是智能提示卻能讓你在寫代碼的過程當中更加舒暢，這也是我在小項目中還要堅持使用TypeScript的緣由。

2.TypeScript的前景

學一門新語言最重要的是什麼？不是它有多快，多簡潔。而是在於它的前景有多好。只有用的人多了纔會有更多的工做崗位，和更優秀的開源項目。

TypeScript是由微軟開發和維護，發佈後被Google採用，用在了自家的Angular2上，兩大巨頭都和這門語言發生了聯繫，前景上無需太過擔憂。

而且很是流行的前端框架Vue3也在使用TypeScript重構，這也讓很多人擔憂會對現有的寫法不兼容，可是請坐和放寬，尤大已表示現有的寫法一樣適用於Vue3。

3.如何開始使用

TypeScript是JavaScript的超集，寫法上發生一些變化而已，因此只須要花上五分鐘看下面的教程就能寫出TypeScript代碼。這裏的教程只是爲了讓你儘快寫出TypeScript代碼而已，後續更深刻的用法和理解還須要看我從此的文章，或者經過搜索引擎查漏補缺。

3.1安裝環境

npm install -g typescript

//編譯命令
tsc hello.ts
複製代碼

3.2 類型寫法

TypeScript在建立一個變量時必須聲明它的類型，有多人會擔憂這會限制本身的騷操做，不用擔憂，你想騷也能夠全都用any。

//布爾值
let isDone: boolean = false

//數字
let n: number = 6

//字符串
let pepoName: string = '小王'
let introduction: string = `${pepoName}今年已經${n}歲了！！！`

//任意類型
let anySomething: any = '什麼都行'

//聯合類型，兩種類型均可以
let numandstring: number | string;

//數組
let list: number[] = [1,2,3]
let listString: string[] = ['1','2','3']
let numandString: (number | string)[] = ['1',2,3]
複製代碼

TypeScript還有類型推論，若是在建立一個變量的時候沒有指定類型，那麼會根據賦值類型來決定，若是隻是建立了一個變量可是沒有賦值，會默認爲any。

3.3接口

接口是TypeScript的特性，能夠建立一個類，而後經過調用這個類來生成實例：

interface Person {
    //只讀屬性，只能在建立實例的時候賦值，以後不能夠更改
	  readonly id: number;
    name: string;
    age: number;
    //後面加問號的話容許建立實例時少這個屬性
	  address?: string;
    //若是但願在實例裏自由添加屬性，可使用任意屬性
    //可是要注意的是，一旦建立了任意屬性，那麼接口裏面的肯定屬性和必要屬性必須爲任意屬性類型的子集
    //好比任意屬性的類型爲string的話，age會報錯，由於它爲number
    [propName: string]: any;
}

//多一個屬性或者少一個都會報錯
let tom: Person = {
    id: 1,
    name: 'Tom',
    age: 18,
}
複製代碼

3.4 函數

//空白值函數
function awsome(): void{
	console.log('do something')
}

//參數後面有？則是能夠跳過
function buildName(firstName: string, lastName?: string, age: number = 18){
	  if(!lastName){
        console.log(firstName)
        return
    }
    console.log(firstName + lastName)
}
複製代碼

3.5 聲明文件

在使用第三方庫時，必須引入它的聲明文件才能得到代碼補全和提示，可使用@types來管理聲明文件，好比要使用Puppeteer，要引入它的聲明文件須要：

npn install @types/Puppeteer
複製代碼