為什么我們要用typescript彤委?
javascript是一門弱類型語言,變量的數(shù)據(jù)類型具有動態(tài)性,只有執(zhí)行時才能確定變量的類型皇拣,這種后知后覺的認錯方法會讓開發(fā)者成為調(diào)試大師,但是可能對編程能力方面不具有提升薄嫡,但是對找錯誤的方法能力卻能得到加強氧急。typescript的類型機制可以有效杜絕由變量類型引起的誤用問題,而且開發(fā)者可以控制對類型的監(jiān)控程度毫深,是嚴格限制變量類型還是寬松限制變量類型吩坝,都取決于開發(fā)者的需求,添加類型機制之后哑蔫,副作用主要有2個:增大了開發(fā)人員的學習曲線钉寝,增加了設(shè)定類型的開發(fā)時間≌⒚裕總體而言嵌纲,這些付出相對于代碼的健壯性和可維護性,都是值得的腥沽。
此外逮走,類型注釋是Typescript的內(nèi)置功能之一,允許文本編輯器和IDE可以對我們的代碼執(zhí)行更好的靜態(tài)分析今阳。這意味著我們可以通過自動編譯工具的幫助师溅,在編寫代碼時減少錯誤,從而提高我們的生產(chǎn)力
typescript學習由淺入深
建議node版本在8.0及其以上
安裝typescript
npm install -g typescript 或者yarn global add typescript
demo
mkdir ts-example
cd ts-example
vim index.ts
TS的文件編寫
const sayHello = (name: string) => {
return `Hello ${name}`
}
let user = 'gitconnected'
console.info(sayHello(user));
利用tsc index.ts進行編譯
可以 看見當前目錄下面出現(xiàn)index.js文件
編譯過后的js文件
var sayHello = function (name) {
return "Hello " + name;
};
var user = 'gitconnected';
console.info(sayHello(user));
由此我們可以看出:
tsc index.ts這個操作會移除函數(shù)sayHello中參數(shù)的類型約束盾舌,創(chuàng)建一個index.js文件墓臭,同時轉(zhuǎn)換為 ES5 代碼。最終的 js 文件可以安全的運行在瀏覽器或者 Node 環(huán)境
(node是不能直接運行ts文件的)
typescript的錯誤處理
使用ts的一個好處就是如果你代碼中變量類型不符妖谴,它會自動捕獲到這類錯誤窿锉。這樣就可以讓我們的代碼在生產(chǎn)環(huán)境前捕獲他,并不需要在出錯前捕獲他了。
額外的ts文件擴展
除了.ts文件之外榆综,你還可以使用.d.ts文件來標記某個早期的js庫中對象的類型妙痹,或者使用.tsx文件用來在用來在React項目中運用ts的語法。
總結(jié)
使用ts的好處
1.在開發(fā)環(huán)境下捕獲錯我
智能提示和代碼自動補全
提高了代碼的可讀性
使用Es2015+
可選的靜態(tài)類型
6.強大的生態(tài)
增加職業(yè)機會
在React中使用ts無線再引入propsTypes
使用ts的缺點
編寫代碼需要更高的前期學習成本
又多了一個需要持續(xù)更近最新版本的庫
js工程的學習曲線變陡
復(fù)雜的類型可能很難搞清楚
代碼更啰嗦
依然需要使用打包工具