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所提供的思維方式，能夠讓你在以后的開發中長期受益，
作者：京東物流 吳云闊
來源：京東云開發者社區
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556344.html
標籤：JavaScript
上一篇：CSS基礎-背景
下一篇：返回列表