在看這篇文章之前，我是強烈推薦TypeScript 入門教程這本書的，因為這本書它是：從 JavaScript 程式員的角度總結思考，循序漸進的理解TypeScript，文章來源也是該書，但聽我一句話：踩過坑才代表會了，【建議收藏】
希望你看這本書之前已經具備了以下技能：

熟練使用JavaScript開發日常專案

一、什么是TypeScript？

1、TypeScript詞解

Typed JavaScript at Any Scale，

添加了型別系統的 JavaScript，適用于任何規模的專案，

以上是官網[1]對于 TypeScript 的定義，強調了兩個重要特性：

型別系統
適用于任何規模

2、TypeScript的特性

1、型別系統

從 TypeScript 的名字就可以看出來，「型別」是其最核心的特性，

我們知道，JavaScript 是一門非常靈活的編程語言（弱型別）：

沒有型別約束，一個變數可能開始是字串，過一會兒又被賦值為數字，
隱式轉換可以在運行中把變數型別轉來轉去，
基于原型的面向物件編程，使得原型上的屬性或方法可以在運行時被修改，
函式是 JavaScript 中的一等公民，可以賦值給變數，也可以當作引數或回傳值，

這種靈活性就像一把雙刃劍，一方面使得 JavaScript 蓬勃發展，無所不能（App，桌面、小程式、網站、各種框架、服務端）；但在另一方面卻因代碼參差不齊導致維護成本較高，

而 TypeScript 的型別系統，在很大程度上彌補了 JavaScript 的缺點，

TypeScript 是靜態型別

型別系統按照「型別檢查的時機」來分類，可以分為動態型別和靜態型別，

動態型別是指在運行時才會進行型別檢查，這種語言的型別錯誤往往會導致運行時錯誤，JavaScript 是一門解釋型語言，沒有編譯階段，所以它是動態型別，以下這段代碼在運行時才會報錯：

let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 運行時會報錯（foo.split 不是一個函式），造成線上 bug

靜態型別是指編譯階段就能確定每個變數的型別，這種語言的型別錯誤往往會導致語法錯誤，TypeScript 在運行前需要先編譯為 JavaScript，而在編譯階段就會進行型別檢查，所以 TypeScript 是靜態型別，這段 TypeScript 代碼在編譯階段就會報錯了：

let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 編譯時會報錯（數字沒有 split 方法），無法通過編譯

這段 TypeScript 代碼看上去和 JavaScript 沒有什么區別，

實際上大部分 JavaScript 代碼都只需要經過少量的修改（或者完全不用修改）就能變成 TypeScript 代碼，這得益于 TypeScript 強大的「型別推論」，即使不去手動宣告變數 foo 的型別，也能在變數初始化時自動推論出它是一個 number 型別，

完整的 TypeScript 代碼是這樣的：

let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 編譯時會報錯（數字沒有 split 方法），無法通過編譯

TypeScript 是弱型別

型別系統按照「是否允許隱式型別轉換」來分類，可以分為強型別和弱型別，

以下這段代碼不管是在 JavaScript 中還是在 TypeScript 中都是可以正常運行的，運行時數字 1 會被隱式型別轉換為字串 '1'，加號 + 被識別為字串拼接，所以列印出結果是字串 '11'，

console.log(1 + '1');
// 列印出字串 '11'

TypeScript 是完全兼容 JavaScript 的，它不會修改 JavaScript 運行時的特性，所以它們都是弱型別，

作為對比，Python 是強型別，以下代碼會在運行時報錯：

print(1 + '1')
# TypeError: unsupported operand type(s) for +: 'int' and 'str'

若要修復該錯誤，需要進行強制型別轉換：

print(str(1) + '1')
# 列印出字串 '11'

JavaScript 和 TypeScript 中不管加號兩側是什么型別，都可以通過隱式型別轉換計算出一個結果——而不是報錯——所以 JavaScript 和 TypeScript 都是弱型別，

雖然TypeScript是弱型別，但我們可以通過TypeScript提供的型別系統，以及ESLint提供的代碼檢查功能，使得TypeScript更像是一個「強型別」，

這樣的型別系統體現了 TypeScript 的核心設計理念：在完整保留 JavaScript 運行時行為的基礎上，通過引入靜態型別系統來提高代碼的可維護性，減少可能出現的 bug，

2、適用于任何規模

TypeScript 非常適用于大型專案，型別系統可以為大型專案帶來更高的可維護性，以及更少的 bug，

在中小型專案中由于有[型別推論]，大部分型別都不需要手動宣告了，所以不會很大程度的降低開發效率，故部分中小企業也會選擇它，

TypeScript 還可以和 JavaScript 共存，如果你是老的JavaScript專案，你想改造成TypeScript的專案，但又代碼量太大并且專案要繼續更新，那么你可以新的內容和檔案用TypeScript，老的不變，當閑下來時，可以逐步將老的一個一個檔案的升級為TypeScript，

事實上，就算你從來沒學習過 TypeScript，你也可能已經在不知不覺中使用到了 TypeScript——在 VSCode 編輯器中撰寫 JavaScript 時，代碼補全和介面提示等功能就是通過 TypeScript Language Service 實作的：

一些第三方庫原生支持了 TypeScript，在使用時就能獲得代碼補全了，比如 Vue 3.0：

有一些第三方庫原生不支持 TypeScript，但是可以通過安裝社區維護的型別宣告庫（比如通過運行 npm install --save-dev @types/react 來安裝 React 的型別宣告庫）來獲得代碼補全能力——不管是在 JavaScript 專案中還是在 TypeScript 中專案中都是支持的：

由此可見，TypeScript 的發展已經深入到前端社區的方方面面了，任何規模的專案都或多或少得到了 TypeScript 的支持，

3、與標準同步發展

TypeScript 的另一個重要的特性就是堅持與 ECMAScript 標準同步發展，

ECMAScript 是 JavaScript 核心語法的標準，自 2015 年起，每年都會發布一個新版本，包含一些新的語法，

一個新的語法從提案到變成正式標準，需要經歷以下幾個階段：

Stage 0：展示階段，僅僅是提出了討論、想法，尚未正式提案，
Stage 1：征求意見階段，提供抽象的 API 描述，討論可行性，關鍵演算法等，
Stage 2：草案階段，使用正式的規范語言精確描述其語法和語意，
Stage 3：候選人階段，語法的設計作業已完成，需要瀏覽器、Node.js 等環境支持，搜集用戶的反饋，
Stage 4：定案階段，已準備好將其添加到正式的 ECMAScript 標準中，

一個語法進入到 Stage 3 階段后，TypeScript 就會實作它，一方面，讓我們可以盡早的使用到最新的語法，幫助它進入到下一個階段；另一方面，處于 Stage 3 階段的語法已經比較穩定了，基本不會有語法的變更，這使得我們能夠放心的使用它，

除了實作 ECMAScript 標準之外，TypeScript 團隊也推進了諸多語法提案，比如可選鏈運算子（?.）、空值合并運算子（??）、Throw 運算式、正則匹配索引等，

3、怎么安裝TypeScript和編輯器推薦

1、安裝 TypeScript

TypeScript 的命令列工具安裝方法如下：

npm install -g typescript
# 或者用yarn

以上命令會在全域環境下安裝 tsc 命令，安裝完成之后，我們就可以在任何地方執行 tsc 命令了，

編譯一個 TypeScript 檔案很簡單：

tsc hello.ts

我們約定使用 TypeScript 撰寫的檔案以 .ts 為后綴，用 TypeScript 撰寫 React 時，以 .tsx 為后綴，

2、編輯器

TypeScript 最大的優勢之一便是增強了編輯器和 IDE 的功能，包括代碼補全、介面提示、跳轉到定義、重構等，

主流的編輯器都支持 TypeScript，這里我推薦使用 Visual Studio Code（前端開發神器），

它是一款開源，跨終端的輕量級編輯器，內置了對 TypeScript 的支持，無需要編譯階段，寫完就能看到對不對，

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6acs5DXl-1635497989842)(<> “點擊并拖拽以移動”)]??

上圖寫完就報了錯誤，因為number沒有length屬性，

另外vscode本身也是用 TypeScript 撰寫的，

下載安裝：Visual Studio Code - Code Editing. Redefined

4、第一個案例Hello TS

我們從一個簡單的例子開始，

將以下代碼復制到 hello.ts 中：

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'TS';
console.log(sayHello(user));

然后執行

tsc hello.ts

這時候會生成一個編譯好的檔案 hello.js：

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'TS';
console.log(sayHello(user));

在 TypeScript 中，我們使用 : 指定變數的型別，: 的前后有沒有空格都可以，

上述例子中，我們用 : 指定 person 引數型別為 string，但是編譯為 js 之后，并沒有什么檢查的代碼被插入進來，

這是因為 TypeScript 只會在編譯時對型別進行靜態檢查，如果發現有錯誤，編譯（ts檔案轉換成js的程序）的時候就會報錯，而在運行時，與普通的 JavaScript 檔案一樣，不會對型別進行檢查，

如果我們需要保證運行時的引數型別，還是得手動對型別進行判斷：

function sayHello(person: string) {
    if (typeof person === 'string') {
        return 'Hello, ' + person;
    } else {
        throw new Error('person is not a string');
    }
}

let user = 'TS';
console.log(sayHello(user));

下面嘗試把這段代碼編譯一下：

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = [0, 1, 2];
console.log(sayHello(user));

編輯器中會提示錯誤，編譯的時候也會出錯：

但是還是生成了 js 檔案：

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = [0, 1, 2];
console.log(sayHello(user));

這是因為 TypeScript 編譯的時候即使報錯了，還是會生成編譯結果，我們仍然可以使用這個編譯之后的檔案，

如果要在報錯的時候終止 js 檔案的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可，關于 tsconfig.json，請參閱官方手冊（中文版），后面會在TypeScript基礎的原始資料型別[數值]中說明sconfig.json怎么來的！

二、TypeScript基礎

1、原始資料型別

原始資料型別 · TypeScript

PS：空值中：

與 void 的區別是，undefined 和 null 是所有型別的子型別，也就是說 undefined 型別的變數，可以賦值給 number 型別的變數：(需要tsconfig.json中strict設定為false)

2、任意值

任意值 · TypeScript

3、型別推論

型別推論 · TypeScript

4、聯合型別

聯合型別 · TypeScript

PS：需要注意的是，一旦定義了可選屬性，那么同一個介面內其他所有的屬性，都只能是可選屬性的子集，否則將會報錯！集合概念：string | number 為例，number為它的子集，string也為它的子集，

另一個版本問題：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dRdWMx1b-1635497989845)(<> “點擊并拖拽以移動”)]?

5、物件的型別—介面

物件的型別——介面 · TypeScript

6、陣列的型別

陣列的型別 · TypeScript

PS：疑惑？ {
[index: number]: number;
length: number;
callee: Function;
}

中任意型別為number為什么 callee可以是Function？

7、函式的型別

函式的型別 · TypeScript

8、型別斷言

型別斷言 · TypeScript

9、宣告檔案

宣告檔案 · TypeScript

10、內置物件

內置物件 · TypeScript

三、TypeScript進階

進階 · TypeScript

四、總結

咳，偷個懶，不一一列舉，還是那句話，對于TypeScript 入門教程這本書我是極其推薦的，學 TypeScript 還是得看它，除了以上的內容外，它還囊括了工程化配置說明，我以我學弟的人格擔保，看它必會！沖啊xdm！

🔥往期文章推薦：

手把手教你在 Vue 中使用 JSX，不怕學不會！【建議收藏】_紙飛機博客-CSDN博客

2021年的幾次面試讓我死磕了17道JS手寫題！_紙飛機博客-CSDN博客

大前端基本知識點及面試重災區學習目錄_紙飛機博客-CSDN博客

??一起談一談js中的宏任務和微任務！_紙飛機博客-CSDN博客

前端高效開發不得不知道的一些JavaScript庫！_紙飛機博客-CSDN博客

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/341904.html

標籤：其他

上一篇：JavaScript紅寶書、犀牛書（2本）簡介

下一篇：認識和使用vue中更全面的偵聽器watch

一文教你如何學習TypeScript