TypeScript簡介
1.TypeScript 是什麼
以下是官方比較書面化的一些介紹:
TypeScript是一種由微軟開發的自由和開源的程式語言。它是JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態型別和基於類的面向物件程式設計。安德斯·海爾斯伯格,C#的首席架構師,已工作於TypeScript的開發。 TypeScript擴充套件了JavaScript的語法,所以任何現有的JavaScript程式可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發而設計,而編譯時它產生 JavaScript 以確保相容性。 TypeScript支援為已存在的 JavaScript 庫新增型別資訊的標頭檔案,擴充套件了它對於流行的庫如 jQuery,MongoDB,Node.js和 D3.js的好處。
JavaScript + 型別宣告
其實巴拉巴拉這麼多,我們看了可能還是不知道這是個什麼鬼,還不如直接放一段程式碼來得實在:
publicgetRandomArray():Array<number>{ //定義數字型別的陣列arrayA letarrayA:Array<number>=[1,2,3,4,5,6,7,8]; //定義數字型別的陣列arrayB letarrayB:Array<number>=newArray<number>(); letindex:number; //從0到9迴圈 for(leti=0;i<10;i++){ //生成一個比arrayA長度小的隨機數,作為下標 index=Math.floor(Math.random()*arrayA.length); //取出arrayA指定下標的值放入arrayB arrayB.push(arrayA[index]); } console.log("已隨機生成一個數組",arrayB); returnarrayB; }
這段程式碼實現了一個方法,用來生成一個隨機的陣列:先定義了一個數組arrayA,賦值為1到8;又定義了一個空的陣列arrayB。迴圈10次,每次都隨機取arrayA中的一個元素,放入arrayB,迴圈完畢後,控制檯輸出arrayB,並將其作為方法的返回值返回。通過程式碼的介紹,你會發現,這裡面除了方法和變數的定義時後面跟了一個":Array"、":number"外,完全就是一段標準的JavaScript程式碼。這就是TypeScript的第一個特點:在JavaScript的基礎上進行了擴充套件,增加了型別,同時完全相容JavaScript語法。
JavaScript + 面向物件
我們再來看下面這段程式碼:
//使用者實體類 classUser{ //姓名 字串型別 privatename:string; //年齡 數字型別 privateage:number; //帶引數的構造方法 傳入引數為 姓名,年齡 publicconstructor(name:string,age:number){ this.name=name; this.age=age; } //獲取姓名 publicgetName():string{ returnthis.name; } //獲取年齡 publicgetAge():number{ returnthis.age; } }
這段程式碼是用TypeScript宣告的一個實體類,Java程式設計師們可能會驚歎一下:我去!這不就是抄襲的Java嗎!?這段程式碼定義了一個User物件,它有兩個屬性:name,age,有個構造方法,除了型別聲明後置了以外,簡直和Java中實體類的宣告一模一樣。當然,它們只是長得像,用起來還是使用JavaScript的語法格式。(TypeScript真的是要讓Java和JavaScript傻傻分不清楚了呢)這就是TypeScript的第二個特點:在JavaScript的基礎上添加了基於類的面向物件程式設計。
2. 為什麼要用 TypeScript
經過上面的介紹,我們知道了TypeScript(簡稱TS)其實就是增強版的JavaScript(簡稱JS),那麼隨著jQuery、vue、node.js等框架的興起,我們很多的前端程式設計使用JavaScript就足夠了,為什麼還要用TypeScript呢?我的回答是:為了掌控我們自己寫的程式碼。看到我的回答,你可能感到詫異:我自己寫的程式碼我還掌控不了嗎?答案是肯定的。
JavaScript 的弱型別
由於JS是一門弱型別語言,所有變數和方法的返回值都可以是任意型別的。你定義好了一個變數或者方法,在你使用時,還必須返回來看看它究竟是個啥。因為它是弱型別的,編輯器沒法幫你做程式碼檢查(比如:即使你要呼叫變數不存在的屬性編輯器也不會提示錯誤,因為編輯器也不知道它是什麼型別的,有什麼屬性),必須你親力親為,會出現你在總是在寫程式碼時一片太平盛世的景色,一執行,各種能想到的想不到的錯誤。
JavaScript 的不可控性
即使你嚴格檢查你的程式碼,保證所有變數和方法用的都對,一切邏輯都正確,也不一定能得到你想要的結果,比如那個經典的0.2+0.4的問題:
console.log(0.2+0.4===0.6); //執行結果過為:false 0.2 + 0.4 = 0.6000000000000001
這個案例在這裡就不詳細解釋了,有興趣的可以網上查一下,有很多經典的JS問題。一句話:JavaScript有太多不可控性
TypeScript 有益身心健康
因為TS加入了型別的概念,在寫程式碼時,編輯器就能對你引用的方法和變數做型別檢查,在Egret Wing中有很好的程式碼提示功能和程式碼檢查功能,避免這些編碼問題在執行時才暴露,同時也使你的程式碼邏輯清晰,易讀易維護。開發時滿屏都是清晰明瞭的程式碼,想想都興奮,心情好了,精神足了,氣色紅潤了,不覺間人生也充滿了樂趣。而面向物件的程式設計,更讓人激動,如果你原本就是使用面嚮物件語言的開發者,那麼你會第一次感覺到寫JS(你沒看錯,TS語言最終也是被編譯成JS執行在瀏覽器的)也使這麼爽的事情。TS讓你像寫Java一樣寫JS,是不是很神奇。當你要開發一款遊戲時,程式碼量巨大,而且不容許有任何不確定的錯誤產生,TS是代替JS的首選,沒有之一。
3.TypeScript 的學習成本有多大
每種程式語言都有很多共通的地方,當你瞭解JS,那麼你需要補充一些面向物件的知識。當然,我們說過TS能完全相容JS,你直接用JS語法寫一樣可行,但這樣你就感受不到TS的靈魂所在(小夥子,這樣的程式碼是沒有靈魂滴)。當你瞭解面嚮物件語言,又瞭解JS時,恭喜你,看一眼文件,直接上手就行。
TypeScript推薦文件連結:ofollow,noindex">https://www.tslang.cn/docs/handbook/basic-types.html