《TypeScript 快速上手：類型、編譯與嚴格模式的簡明教程》

一、TypeScript介紹

在引入編程社區 20 多年后，JavaScript 現在已成為有史以來應用最廣泛的跨平臺語言之一。JavaScript 最初是一種用于向網頁添加微不足道的交互性的小型腳本語言，現已發展成為各種規模的前端和后端應用程序的首選語言。雖然用 JavaScript 編寫的程序的大小、范圍和復雜性呈指數級增長，但 JavaScript 語言表達不同代碼單元之間關系的能力卻沒有。結合 JavaScript 相當奇特的運行時語義，語言和程序復雜性之間的這種不匹配使得 JavaScript 開發成為一項難以大規模管理的任務。

程序員編寫的最常見的錯誤類型可以描述為類型錯誤：在預期不同類型的值的地方使用了某種類型的值。這可能是由于簡單的拼寫錯誤、無法理解庫的 API 表面、對運行時行為的錯誤假設或其他錯誤。 TypeScript 的目標是成為 JavaScript 程序的靜態類型檢查器——換句話說，是一個在代碼運行之前運行的工具（靜態）并確保程序的類型正確（類型檢查）。 TypeScript 是一種由微軟開發的自由和開源的編程語言。它是 JavaScript 的一個超集，而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程。

總而言之，ts是js的語言擴展，給js提供了一層類型檢查。

二、JS ,ES ,TS的關系

TypeScript 是 JavaScript 的超集，即包含JavaScript 的所有元素，能運行JavaScript 的代碼，并擴展了 JavaScript 的語法。相比于JavaScript ，它還增加了靜態類型、類、模塊、接口和類型注解方面的功能，更易于大項目的開發。 ?

?三、TypeScript 與 JavaScript 的區別

四、?TypeScript入門

JavaScript實際中問題?

JavaScript 中的每個值都有一組行為，您可以通過運行不同的操作來觀察。這聽起來很抽象，我們來舉一個簡單的例子，考慮我們可能對名為 message 的變量運行的一些操作：

// 在 'message' 上訪問屬性 'toLowerCase'，并調用它
message.toLowerCase();
// 調用 'message'
message();

如果我們分解它，第一行可運行的代碼訪問一個屬性 toLowerCase ，然后調用它。第二個嘗試 message 直接調用。

但是假設我們不知道 message 。這很常見——我們無法可靠地說出嘗試運行任何這些代碼會得到什么結果。每個操作的行為完全取決于我們最初給 message 的賦值。

可以調用 message 嗎？
它有 toLowerCase 這個屬性嗎？
如果能， toLowerCase 可以調用嗎？
如果這兩個值都是可調用的，它們返回什么？

這些問題的答案通常是我們在編寫 JavaScript 時牢記在心的東西，我們必須希望所有細節都正確。

假設 message 按以下方式定義：

const message = "Hello World!";

正如您可能猜到的，如果我們嘗試運行 message.toLowerCase() ，我們只會得到相同的小寫字符串。那第二行代碼呢？如果您熟悉 JavaScript，您就會知道這會失敗并出現異常：

TypeError: message is not a function

如果我們能避免這樣的錯誤，那就太好了。

當我們運行我們的代碼時，我們的 JavaScript 運行時選擇做什么的方式是通過確定值的類型——它具有什么樣的行為和功能。這 TypeError就是暗指的一部分- 它說字符串 "Hello World!" 不能作為函數調用。

TypeScript就用諸多特性為我們解決了困擾我們的問題，我接下來將介紹他們：

靜態類型檢查

回想一下 TypeError 我們之前嘗試將 string 作為函數調用的情況。大多數人不喜歡在運行他們的代碼時出現任何類型的錯誤 - 這些被認為是錯誤！當我們編寫新代碼時，我們會盡量避免引入新的錯誤。

理想情況下，我們可以有一個工具來幫助我們在代碼運行之前發現這些錯誤。這就是像 TypeScript 這樣的靜態類型檢查器所做的。靜態類型系統描述了當我們運行程序時我們的值的形狀和行為。像 TypeScript 這樣的類型檢查器，告訴我們什么時候事情可能會出軌。

非異常故障

例如，規范說嘗試調用不可調用的東西應該拋出錯誤。也許這聽起來像是“明顯的行為”，但您可以想象訪問對象上不存在的屬性也應該拋出錯誤。相反，JavaScript 給了我們不同的行為并返回值 undefined。

最終，靜態類型系統要求必須調用哪些代碼，應該在其系統中標記，即使它是不會立即拋出錯誤的“有效”JavaScript。比如：在 TypeScript 中，以下代碼會產生關于 location 未定義的錯誤：

TypeScript 可以在我們的程序中捕獲很多合法的錯誤。

錯別字
未調用的函數
或基本邏輯錯誤

顯式類型

引入一個案例：

hello.ts

function greet(person, date) {console.log(`Hello ${person}, today is ${date}!`);
}greet("hyyyyy");

?到現在為止，我們還沒有告訴 typescript person 或者 date 是什么類型。當我們編輯代碼時會告訴 TypeScript person 是一個 string ，那 date 應該是一個 Date 對象。

有了這個，TypeScript 可以告訴我們其他 greet 可能被錯誤調用的情況。例如修改一下 hello.ts 代碼：

function greet(person: string, date: Date) {console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

但是：

嗯？TypeScript 在我們的第二個參數上報告了一個錯誤，這是為什么呢？也許令人驚訝的是， Date() 在 JavaScript 中調用會返回一個 string 。可以使用 new Date() 滿足我們的期望,快速修復錯誤：?

function greet(person: string, date: Date) {console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}greet("hyyyy", new Date());

降級編譯

什么是 TypeScript 降級編譯？

TypeScript 降級編譯是指將 TypeScript 代碼編譯為較低版本的 JavaScript 代碼（如 ES5、ES3 等），以確保代碼可以在舊版瀏覽器或環境中運行。

?為什么需要降級編譯？
- 新版 JavaScript（如 ES6+）引入了許多新特性（如箭頭函數、類、模塊等），但這些特性在舊版瀏覽器（如 IE11）或某些環境中不被支持。
- 通過降級編譯，可以將這些新特性轉換為舊版 JavaScript 語法，從而確保代碼的兼容性。

?ypeScript 編譯器（`tsc`）的作用

TypeScript 編譯器（tsc）是 TypeScript 的核心工具，負責將 TypeScript 代碼編譯為 JavaScript 代碼。它支持以下功能：

將 TypeScript 語法轉換為 JavaScript 語法。
支持將代碼降級到指定的 JavaScript 版本（如 ES5、ES3）。
提供類型檢查和錯誤提示。

?目標版本（`target`）?

在 TypeScript 編譯中，target?是一個關鍵配置選項，用于指定編譯后的 JavaScript 目標版本。例如：

es3：將代碼編譯為 ES3 語法（兼容性最好，但代碼體積較大）。
es5：將代碼編譯為 ES5 語法（兼容大多數舊版瀏覽器）。
es6（或?es2015）：將代碼編譯為 ES6 語法（支持現代瀏覽器）。
esnext：將代碼編譯為最新版本的 JavaScript。

嚴格模式

不同的用戶使用 TypeScript 在類型檢查器中，希望檢查的嚴格程度不同。

有些人正在尋找更寬松的驗證體驗，它可以幫助僅驗證其程序的某些部分，并且仍然擁有不錯的工具。這是 TypeScript 的默認體驗，其中類型是可選的，推理采用最寬松的類型，并且不檢查潛在的 null / undefined 值，就像 tsc 面對錯誤時如何編譯生成JS文件一樣。如果你要遷移現有的 JavaScript，這可能是理想的第一步。

相比之下，許多用戶更喜歡讓 TypeScript 盡可能多地立即驗證，這就是該語言也提供嚴格性設置的原因。這些嚴格性設置將靜態類型檢查，從開關（無論您的代碼是否被檢查）轉變為更接近于撥號的東西。你把這個撥盤調得越遠，TypeScript 就會為你檢查越多。這可能需要一些額外的工作，但總的來說，從長遠來看，它是物有所值的，并且可以實現更徹底的檢查和更準確的工具。如果可能，新的代碼庫應該始終打開這些嚴格性檢查。

TypeScript 有幾個可以打開或關閉的類型檢查嚴格標志，除非另有說明，否則我們所有的示例都將在啟用所有這些標志的情況下編寫。在命令行里設置 strict ，或在 tsconfig.json 中配置 "strict": true 將它打開。