1 前言

作為一個(gè)前端語(yǔ)言，Javascript從最初只是用來(lái)寫(xiě)頁(yè)面，到如今的移動(dòng)終端、后端服務(wù)、神經(jīng)網(wǎng)絡(luò)等等，它變得幾乎無(wú)處不在。如此廣闊的應(yīng)用領(lǐng)域，對(duì)語(yǔ)言的安全性、健壯性以及可維護(hù)性都有了更高的要求。盡管ECMAScript標(biāo)準(zhǔn)在近幾年有了長(zhǎng)足的進(jìn)步，但是在類(lèi)型檢查方面依然毫無(wú)建樹(shù)。在這種情況下TypeScript應(yīng)運(yùn)而生。

2 為什么要使用TypeScript

在JavaScript的開(kāi)發(fā)過(guò)程中，相信經(jīng)常會(huì)遇到以下這種場(chǎng)景：

1. 場(chǎng)景一： 你需要調(diào)用一個(gè)別人開(kāi)發(fā)的函數(shù) function funcName(paramA,paramB,paramC,paramD){…}，但是很不幸，這個(gè)家伙沒(méi)有留下任何注釋?zhuān)瑸榱伺宄?shù)的類(lèi)型，你不得不硬著頭皮去讀里面的邏輯；
2. 場(chǎng)景二： 為了保證代碼的健壯性，你很負(fù)責(zé)任的對(duì)函數(shù)的每個(gè)輸入?yún)?shù)進(jìn)行了各種假設(shè)，導(dǎo)致函數(shù)內(nèi)一多半代碼都是對(duì)參數(shù)（類(lèi)型、個(gè)數(shù)等）的判斷邏輯；
3. 場(chǎng)景三： 老板很看好你，讓你維護(hù)一個(gè)重要的底層類(lèi)庫(kù)，你殫精竭慮優(yōu)化了一個(gè)參數(shù)類(lèi)型，在提交代碼前，不知道有多少地方調(diào)用，你是否感到脊背發(fā)涼？
4. 等等…

以上情況歸結(jié)底，是因?yàn)?JavaScript 是一門(mén)動(dòng)態(tài)弱類(lèi)型語(yǔ)言，對(duì)變量的類(lèi)型非常寬容，而且不會(huì)在這些變量和它們的調(diào)用者間建立結(jié)構(gòu)化的契約。如果你長(zhǎng)期在沒(méi)有類(lèi)型約束的環(huán)境下開(kāi)發(fā)，就會(huì)造成“類(lèi)型思維”的缺失，養(yǎng)成不良的編程習(xí)慣，這也是做前端開(kāi)發(fā)的短板之一，因此使用TypeScript對(duì)于前端開(kāi)發(fā)者而言是迫切并且必要的。

使用 TypeScript 還能帶來(lái)其他好處。比如，Visual Studio Code 具有強(qiáng)大的自動(dòng)補(bǔ)全、導(dǎo)航和重構(gòu)功能，這使得接口定義可以直接代替文檔，同時(shí)也提高了開(kāi)發(fā)效率，降低了維護(hù)成本。更重要的是，TypeScript 可以幫助團(tuán)隊(duì)重塑“類(lèi)型思維”，使前端開(kāi)發(fā)者從代碼的編寫(xiě)者蛻變?yōu)榇a的設(shè)計(jì)者。

如果說(shuō) JavaScript 是一匹野馬，那么 TypeScript 就是束縛這匹野馬的韁繩。作為騎士的你，自然可以張開(kāi)雙臂，放飛自我，但如果不是技藝超群，恐怕會(huì)摔得很慘。然而如果抓住了韁繩，你即可閑庭信步，亦可策馬揚(yáng)鞭。這就是 TypeScript 的價(jià)值，它會(huì)讓你在前端開(kāi)發(fā)之路上走得更穩(wěn)，走得更遠(yuǎn)。

3 什么是TypeScript

什么是 TypeScript呢？根據(jù)官方的定義，它是擁有類(lèi)型系統(tǒng)的 JavaScript 的超集，可以編譯成純JavaScript。在這里需要注意三點(diǎn)：

1. 類(lèi)型檢查，TypeScript會(huì)在編譯階段進(jìn)行嚴(yán)格的靜態(tài)類(lèi)型檢查，這意味著你在代碼編寫(xiě)階段就能發(fā)現(xiàn)一些錯(cuò)誤，而不必帶到線(xiàn)上運(yùn)行時(shí)才能發(fā)現(xiàn)；
2. 語(yǔ)言擴(kuò)展：TypeScript 會(huì)包括來(lái)自 ECMAScript 6 和未來(lái)提案中的特性，比如異步操作和裝飾器，也會(huì)從其他語(yǔ)言借鑒某些特性，比如接口和抽象類(lèi)；
3. 工具屬性：TypeScript 能夠編譯成標(biāo)準(zhǔn)的 JavaScript，可以在任何瀏覽器、操作系統(tǒng)上運(yùn)行，無(wú)需任何運(yùn)行時(shí)的額外開(kāi)銷(xiāo)，從這個(gè)角度上講，TypeScript 更像是一個(gè)工具，而不是一門(mén)獨(dú)立的語(yǔ)言

4 TypeScript基礎(chǔ)使用

4.1 基礎(chǔ)類(lèi)型

Ts包含類(lèi)型如下：

1. 數(shù)字類(lèi)型（number）：用來(lái)標(biāo)識(shí)雙精度64為浮點(diǎn)值，包含整數(shù)、浮點(diǎn)數(shù)等，沒(méi)有單獨(dú)的整型、浮點(diǎn)型；
2. 字符串（string）：一個(gè)字符系列，使用單引號(hào)(‘)或雙引號(hào)(“)來(lái)表示字符串類(lèi)型。反引號(hào)(`）來(lái)定義多行文本和內(nèi)嵌表達(dá)式；
3. 布爾（boolean）： 值只有true和false；
4. 數(shù)組： 無(wú)關(guān)鍵字，聲明變量：

let arr: number[] = [1, 3]  let arr:Array<number> = [1,2]

5.元組: 無(wú)關(guān)鍵字，元組類(lèi)型用來(lái)表示已知元素個(gè)數(shù)和類(lèi)型的數(shù)組，每個(gè)元素的類(lèi)型不必相同，但是對(duì)應(yīng)位置的類(lèi)型需要相同；

let x: [string, number];x = ['Runoob', 1];    // 運(yùn)行正常x = [1, 'Runoob'];    // 報(bào)錯(cuò)console.log(x[0]);    // 輸出 Runoobx.push(33)console.log(x[2]) // 報(bào)錯(cuò)// 注意x可以繼續(xù)push多個(gè)字段，但是無(wú)法訪(fǎng)問(wèn)

6.枚舉（enum）： 枚舉類(lèi)型用于定義類(lèi)型集合

數(shù)字枚舉：默認(rèn)情況下，第一個(gè)枚舉值是 0，然后每個(gè)后續(xù)值依次遞增 1， 但是，你可以通過(guò)特定的賦值來(lái)改變給任何枚舉成員關(guān)聯(lián)的數(shù)字，如下例子，我們從 3 開(kāi)始依次遞增

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: 用于標(biāo)識(shí)方法的返回值，表示沒(méi)有返回值

8.null: 標(biāo)識(shí)對(duì)象值缺失；

9.undefined： 用于初始化變量為一個(gè)未定義的值

10.never： 是其它類(lèi)型（包括 null 和 undefined）的子類(lèi)型，代表從不會(huì)出現(xiàn)的值

11.Object：object表示非原始類(lèi)型，也就是除number，string，boolean，symbol，null或undefined之外的類(lèi)型。

12.any：任意值是 TypeScript 針對(duì)編程時(shí)類(lèi)型不明確的變量使用的一種數(shù)據(jù)類(lèi)型；（注意：不要輕易使用any，使用any跟使用javascript效果一樣了）

它常用于以下三種情況：

• 變量的值會(huì)動(dòng)態(tài)改變時(shí)，比如來(lái)自用戶(hù)的輸入，任意值類(lèi)型可以讓這些變量跳過(guò)編譯階段的類(lèi)型檢查；
• 改寫(xiě)現(xiàn)有代碼時(shí)，任意值允許在編譯時(shí)可選擇地包含或移除類(lèi)型檢查；
• 定義存儲(chǔ)各種類(lèi)型數(shù)據(jù)的數(shù)組時(shí)

13.聯(lián)合類(lèi)型：可以通過(guò)管道(|)將變量設(shè)置多種類(lèi)型，賦值時(shí)可以根據(jù)設(shè)置的類(lèi)型來(lái)賦值

var val:string|number val = 12 console.log("數(shù)字為 "+ val) val = "Runoob" console.log("字符串為 " + val)

4.2 函數(shù)

// 包含兩個(gè)number類(lèi)型參數(shù)和返回值，不能直接return。必須return一個(gè)數(shù)字function add(x: number, y: number): number {    return x + y;} // 可選參數(shù)， （這里沒(méi)寫(xiě)返回值，利用了typeScript的類(lèi)型推斷能力）function buildName(firstName: string, lastName?: string, a?:number) {    if (lastName)        return firstName + " " + lastName;    else        return firstName;}// 參數(shù)默認(rèn)值function buildName(firstName: string, lastName: string = 'default_name') {    return firstName + " " + lastName;}// 有一種情況，我們不知道要向函數(shù)傳入多少個(gè)參數(shù)，這時(shí)候我們就可以使用剩余參數(shù)來(lái)定義,// 剩余參數(shù)語(yǔ)法允許我們將一個(gè)不確定數(shù)量的參數(shù)作為一個(gè)數(shù)組傳入function buildName(firstName: string, ...restOfName: string[]) {    return firstName + " " + restOfName.join(" ");}let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

4.3 接口（interface）

接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類(lèi)去實(shí)現(xiàn)，然后第三方就可以通過(guò)這組抽象方法調(diào)用，讓具體的類(lèi)執(zhí)行具體的方法。

interface IPerson {     firstName:string,     lastName:string,     sayHi: ()=>string } const customer:IPerson = {     firstName:"Tom",    lastName:"Hanks",     sayHi: ():string =>{return "Hi there"} }

接口可以通過(guò)繼承來(lái)擴(kuò)展自己，繼承使用關(guān)鍵字 extends， 可以單繼承和多繼承

interface Person {    age:number } interface Musician extends Person, person1 {    instrument:string }

4.4 類(lèi)（class）

TypeScript 是面向?qū)ο蟮?JavaScript，類(lèi)描述了所創(chuàng)建的對(duì)象共同的屬性和方法。
定義類(lèi)的關(guān)鍵字為 class，后面緊跟類(lèi)名，類(lèi)可以包含以下幾個(gè)模塊（類(lèi)的數(shù)據(jù)成員）：

• 字段 ? 字段是類(lèi)里面聲明的變量。字段表示對(duì)象的有關(guān)數(shù)據(jù)。
• 構(gòu)造函數(shù) ? 類(lèi)實(shí)例化時(shí)調(diào)用，可以為類(lèi)的對(duì)象分配內(nèi)存。
• 方法 ? 方法為對(duì)象要執(zhí)行的操作。

class Car {     // 字段     engine:string;     // 構(gòu)造函數(shù)     constructor(engine:string) {         this.engine = engine     }      // 方法     disp():void {         console.log("發(fā)動(dòng)機(jī)為 :   "+this.engine)     } }const car = new Car('')

5 總結(jié)

總體而言，TypeScript是一個(gè)很好的工具，即使您沒(méi)有使用過(guò)它，也可以將它納入您的學(xué)習(xí)計(jì)劃中。因?yàn)樗茉谀隳X中播下“類(lèi)型思維”的種子，而思維方式?jīng)Q定了編程習(xí)慣，編程習(xí)慣奠定了工程質(zhì)量，工程質(zhì)量劃定了能力邊界。在面對(duì)越來(lái)越復(fù)雜的前端場(chǎng)景，TypeScript所提供的思維方式，能夠讓你在以后的開(kāi)發(fā)中長(zhǎng)期受益。

作者：京東物流 吳云闊

來(lái)源：京東云開(kāi)發(fā)者社區(qū)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-507495.html

到了這里，關(guān)于typescript的必要性及使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！