“學(xué)習(xí)TypeScript難嗎？”，對(duì)于新手而言，在剛接觸到一門(mén)新技術(shù)的時(shí)候，總是很習(xí)慣的問(wèn)上這么一句。在這里我可以鄭重的告訴你：“上手TypeScript幾乎沒(méi)有任何難度可言！”
TypeScript最近很火，有很多開(kāi)源的項(xiàng)目也是由其開(kāi)發(fā)的，如果你是一名前端開(kāi)發(fā)工程師或準(zhǔn)備要成為一名前端開(kāi)發(fā)工程師的話(huà)，現(xiàn)在如果再不學(xué)習(xí)TypeScript就真的太OUT了！那么現(xiàn)在請(qǐng)你系好安全帶，和我一起踏上學(xué)習(xí)TypeScript之旅吧！
一、TypeScript是什么？
相親也要先了解一下，更何況是學(xué)習(xí)一門(mén)新的知識(shí)，對(duì)吧。
1、TypeScript 是微軟在2012年開(kāi)發(fā)的一門(mén)免費(fèi)開(kāi)源的編程語(yǔ)言。它是 JavaScript 的一個(gè)超集（增強(qiáng)版）。它在JS原來(lái)的基礎(chǔ)上增加了一套十分強(qiáng)大的類(lèi)型系統(tǒng)，從而可以讓小伙伴們?cè)趯?xiě)代碼的時(shí)候獲得更加豐富的語(yǔ)法提示。在代碼的編譯階段也可以通過(guò)類(lèi)型系統(tǒng)的檢查，從而有效避免一些線(xiàn)上錯(cuò)誤。
2、TypeScript是一門(mén)比Java更Script的編程語(yǔ)言。也就是說(shuō)TypeScript具有真正的面向?qū)ο缶幊趟枷?，你可以采用它?lái)完成更加大型復(fù)雜的應(yīng)用。
3、TypeScript始于JavaScript終于JavaScript。也就是說(shuō)TypeScript遵循JavaScript的語(yǔ)法和語(yǔ)義，任何Js都可以在Ts內(nèi)運(yùn)行，但TypeScript它不可以直接在瀏覽器中運(yùn)行，必須要將其轉(zhuǎn)換為JavaScript。
簡(jiǎn)單的說(shuō)：你可以用TypeScript來(lái)編寫(xiě)出更加出色的JavaScript代碼，用來(lái)搞定規(guī)模可觀的JavaScript項(xiàng)目！
二、為什么要學(xué)習(xí)TypeScript?
1 、擁有強(qiáng)大的靠山，分別為微軟與谷歌。TypeScript是由微軟開(kāi)發(fā)的，谷歌的Angular框架是用Typescript開(kāi)發(fā)的。所以TypeScript很有可能是未來(lái)的前端腳本語(yǔ)言發(fā)展的主流方向。
2、Vue 3.0 源碼全部用typescript重寫(xiě)。Vue.Js在前兩年發(fā)展迅速，用戶(hù)數(shù)和粉絲量呈指數(shù)級(jí)增長(zhǎng)，目前Vue開(kāi)發(fā)者插件用戶(hù)數(shù)約為70.4萬(wàn)。
3、Node.js之父瑞安達(dá)爾（Ryan Dahl）發(fā)布了新的開(kāi)源項(xiàng)目 deno，而該項(xiàng)目最終是要提供一個(gè)安全的 TypeScript 運(yùn)行環(huán)境。
4、為了升職加薪！
三、如何學(xué)好TypeScript
1、擁有JavaScript基礎(chǔ)，了解Es6（不解釋?zhuān)?/h6>
2、打開(kāi)你的開(kāi)發(fā)工具，一定要做到邊學(xué)邊練習(xí)。學(xué)習(xí)編程沒(méi)有捷徑可言，唯一的突破口便是多敲打你的代碼。
3、將TypeScript應(yīng)用到一個(gè)較為復(fù)雜的場(chǎng)景中。學(xué)以致用，學(xué)編程也是需要悟的，只有將TypeScript真正應(yīng)用起來(lái)，你才能夠領(lǐng)悟到TypeScript帶給你的震撼。
四、TypeScript相關(guān)
官網(wǎng)：https://www.typescriptlang.org
中文：http://www.tslang.cn
官方博客：https://blogs.msdn.microsoft.com/typescript
五、環(huán)境搭建
因?yàn)門(mén)ypeScript在JavaScript的基礎(chǔ)上增加了類(lèi)型系統(tǒng)，所以TypeScript不能夠直接在瀏覽器當(dāng)中運(yùn)行。我們需要使用編譯器將TypeScript編譯為JavaScript。
先來(lái)搭建一個(gè)TypeScript的基本開(kāi)發(fā)環(huán)境：
1、安裝Node.js
因?yàn)門(mén)ypeScript編譯為JavaScript需要Node環(huán)境的支持，所以需要先進(jìn)行Node的安裝。Node的安裝很簡(jiǎn)單，首先打開(kāi)https://nodejs.org/zh-cn/，下載Node安裝包，然后傻瓜式安裝。安裝完成以后打開(kāi)命令工具輸入：
node -v
npm -v
如果你可以看到node以及npm那就說(shuō)明你已經(jīng)成功安裝好了Node.js
2、全局安裝TypeScript
在命令窗口中繼續(xù)輸入命令：
npm install typescript -g
查看TypeScript版本：
tsc --version
3、運(yùn)行你的第一個(gè)TS程序
- 創(chuàng)建一個(gè)zhangpeiyue.ts文件
- 在文件內(nèi)寫(xiě)入：
var site:string = "zhangpeiyue.com";// string 為設(shè)置變量類(lèi)型
console.log(site);
- 在命令窗口輸入以入命令，將ts編譯為js：
tsc zhangpeiyue.ts
- 在文件夾內(nèi)多出一個(gè)名字為zhangpeiyue.js的文件：
var site = "zhangpeiyue.com";
console.log(site);
- node運(yùn)行
node zhangpeiyue.js
4、實(shí)現(xiàn)對(duì)ts文件監(jiān)聽(tīng)
- 通過(guò)命令，創(chuàng)建package.json
npm init -y
- 打開(kāi)package.json，增加腳本build執(zhí)行tsc命令：
"scripts": {
"build":"tsc"
}
- tsc命令會(huì)使用到tsconfig.json的配置，新建tsconfig.json，輸入以下代碼：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"outDir": "lib"
},
"include":[
"src/**/*.ts"
]
}
以上配置會(huì)將src目錄下的ts編譯到lib文件夾下。outDir設(shè)置輸出目錄。
- 將zhangpeiyue.ts移入到src目錄， 輸入命令：
cnpm run build
你會(huì)發(fā)現(xiàn)lib文件夾多了一個(gè)zhangpeiyue.js文件。
- 如果要實(shí)現(xiàn)代碼自動(dòng)監(jiān)聽(tīng)，可在package.json中增加start腳本：
"scripts": {
"start":"tsc --watch",
"build":"tsc",
},
這樣在你修改完代碼保存后就自動(dòng)將你的ts文件編譯到j(luò)s當(dāng)中。
