作為一個前端語言，Javascript從最初只是用來寫頁面，到如今的移動終端、後端服務、神經網路等等，它變得幾乎無處不在。如此廣闊的應用領域，對語言的安全性、健壯性以及可維護性都有了更高的要求。儘管ECMAScript標準在近幾年有了長足的進步，但是在類型檢查方面依然毫無建樹。在這種情況下TypeS... ...
1 前言
作為一個前端語言，Javascript從最初只是用來寫頁面，到如今的移動終端、後端服務、神經網路等等，它變得幾乎無處不在。如此廣闊的應用領域，對語言的安全性、健壯性以及可維護性都有了更高的要求。儘管ECMAScript標準在近幾年有了長足的進步，但是在類型檢查方面依然毫無建樹。在這種情況下TypeScript應運而生。
2 為什麼要使用TypeScript
在JavaScript的開發過程中，相信經常會遇到以下這種場景：
- 場景一： 你需要調用一個別人開發的函數 function funcName(paramA,paramB,paramC,paramD){…}，但是很不幸，這個家伙沒有留下任何註釋，為了弄清楚參數的類型，你不得不硬著頭皮去讀裡面的邏輯；
- 場景二： 為了保證代碼的健壯性，你很負責任的對函數的每個輸入參數進行了各種假設，導致函數內一多半代碼都是對參數（類型、個數等）的判斷邏輯；
- 場景三： 老闆很看好你，讓你維護一個重要的底層類庫，你殫精竭慮優化了一個參數類型，在提交代碼前，不知道有多少地方調用，你是否感到脊背發涼？
- 等等…
以上情況歸結底，是因為 JavaScript 是一門動態弱類型語言，對變數的類型非常寬容，而且不會在這些變數和它們的調用者間建立結構化的契約。如果你長期在沒有類型約束的環境下開發，就會造成“類型思維”的缺失，養成不良的編程習慣，這也是做前端開發的短板之一，因此使用TypeScript對於前端開發者而言是迫切並且必要的。
使用 TypeScript 還能帶來其他好處。比如，Visual Studio Code 具有強大的自動補全、導航和重構功能，這使得介面定義可以直接代替文檔，同時也提高了開發效率，降低了維護成本。更重要的是，TypeScript 可以幫助團隊重塑“類型思維”，使前端開發者從代碼的編寫者蛻變為代碼的設計者。
如果說 JavaScript 是一匹野馬，那麼 TypeScript 就是束縛這匹野馬的韁繩。作為騎士的你，自然可以張開雙臂，放飛自我，但如果不是技藝超群，恐怕會摔得很慘。然而如果抓住了韁繩，你即可閑庭信步，亦可策馬揚鞭。這就是 TypeScript 的價值，它會讓你在前端開發之路上走得更穩，走得更遠。
3 什麼是TypeScript
什麼是 TypeScript呢？根據官方的定義，它是擁有類型系統的 JavaScript 的超集，可以編譯成純JavaScript。在這裡需要註意三點：
- 類型檢查，TypeScript會在編譯階段進行嚴格的靜態類型檢查，這意味著你在代碼編寫階段就能發現一些錯誤，而不必帶到線上運行時才能發現；
- 語言擴展：TypeScript 會包括來自 ECMAScript 6 和未來提案中的特性，比如非同步操作和裝飾器，也會從其他語言借鑒某些特性，比如介面和抽象類；
- 工具屬性：TypeScript 能夠編譯成標準的 JavaScript，可以在任何瀏覽器、操作系統上運行，無需任何運行時的額外開銷，從這個角度上講，TypeScript 更像是一個工具，而不是一門獨立的語言
4 TypeScript基礎使用
4.1 基礎類型
Ts包含類型如下：
- 數字類型（number）：用來標識雙精度64為浮點值，包含整數、浮點數等，沒有單獨的整型、浮點型；
- 字元串（string）：一個字元系列，使用單引號(‘)或雙引號(“)來表示字元串類型。反引號(`）來定義多行文本和內嵌表達式；
- 布爾（boolean）： 值只有true和false；
- 數組： 無關鍵字，聲明變數：
let arr: number[] = [1, 3] let arr:Array<number> = [1,2]
5.元組: 無關鍵字，元組類型用來表示已知元素個數和類型的數組，每個元素的類型不必相同，但是對應位置的類型需要相同；
let x: [string, number];x = ['Runoob', 1]; // 運行正常x = [1, 'Runoob']; // 報錯console.log(x[0]); // 輸出 Runoobx.push(33)console.log(x[2]) // 報錯// 註意x可以繼續push多個欄位，但是無法訪問
6.枚舉（enum）： 枚舉類型用於定義類型集合
數字枚舉：預設情況下，第一個枚舉值是 0，然後每個後續值依次遞增 1， 但是，你可以通過特定的賦值來改變給任何枚舉成員關聯的數字，如下例子，我們從 3 開始依次遞增
enum Color {Red, // 0Green, // 1Blue // 2};let c: Color = Color.Blue;console.log(c); // 輸出 2console.log(Color[0]) // 輸出Redenum Color1 {Red = 3, // 3Green, // 4Blue // 5}
7.void: 用於標識方法的返回值，表示沒有返回值
8.null: 標識對象值缺失；
9.undefined： 用於初始化變數為一個未定義的值
10.never： 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現的值
11.Object：object表示非原始類型，也就是除number，string，boolean，symbol，null或undefined之外的類型。
12.any：任意值是 TypeScript 針對編程時類型不明確的變數使用的一種數據類型；（註意：不要輕易使用any，使用any跟使用javascript效果一樣了）
它常用於以下三種情況：
- 變數的值會動態改變時，比如來自用戶的輸入，任意值類型可以讓這些變數跳過編譯階段的類型檢查；
- 改寫現有代碼時，任意值允許在編譯時可選擇地包含或移除類型檢查；
- 定義存儲各種類型數據的數組時
13.聯合類型：可以通過管道(|)將變數設置多種類型，賦值時可以根據設置的類型來賦值
var val:string|number val = 12 console.log("數字為 "+ val) val = "Runoob" console.log("字元串為 " + val)
4.2 函數
// 包含兩個number類型參數和返回值，不能直接return。必須return一個數字function add(x: number, y: number): number { return x + y;} // 可選參數， （這裡沒寫返回值，利用了typeScript的類型推斷能力）function buildName(firstName: string, lastName?: string, a?:number) { if (lastName) return firstName + " " + lastName; else return firstName;}// 參數預設值function buildName(firstName: string, lastName: string = 'default_name') { return firstName + " " + lastName;}// 有一種情況，我們不知道要向函數傳入多少個參數，這時候我們就可以使用剩餘參數來定義,// 剩餘參數語法允許我們將一個不確定數量的參數作為一個數組傳入function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" ");}let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
4.3 介面（interface）
介面是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現，然後第三方就可以通過這組抽象方法調用，讓具體的類執行具體的方法。
interface IPerson { firstName:string, lastName:string, sayHi: ()=>string } const customer:IPerson = { firstName:"Tom", lastName:"Hanks", sayHi: ():string =>{return "Hi there"} }
介面可以通過繼承來擴展自己，繼承使用關鍵字 extends， 可以單繼承和多繼承
interface Person { age:number } interface Musician extends Person, person1 { instrument:string }
4.4 類（class）
TypeScript 是面向對象的 JavaScript，類描述了所創建的對象共同的屬性和方法。
定義類的關鍵字為 class，後面緊跟類名，類可以包含以下幾個模塊（類的數據成員）：
- 欄位 − 欄位是類裡面聲明的變數。欄位表示對象的有關數據。
- 構造函數 − 類實例化時調用，可以為類的對象分配記憶體。
- 方法 − 方法為對象要執行的操作。
class Car { // 欄位 engine:string; // 構造函數 constructor(engine:string) { this.engine = engine } // 方法 disp():void { console.log("發動機為 : "+this.engine) } }const car = new Car('')
5 總結
總體而言，TypeScript是一個很好的工具，即使您沒有使用過它，也可以將它納入您的學習計劃中。因為它能在你腦中播下“類型思維”的種子，而思維方式決定了編程習慣，編程習慣奠定了工程質量，工程質量劃定了能力邊界。在面對越來越複雜的前端場景，TypeScript所提供的思維方式，能夠讓你在以後的開發中長期受益。
作者：京東物流 吳雲闊
來源：京東雲開發者社區
