1. TypeScript 簡介
技術標籤：TypeScripttypescriptwebjavascript
1.1 TypeScript 是什麼
TypeScript（簡稱：TS）是 JavaScript 的超集（JS 有的 TS 都有）。
TypeScript = Type + JavaScript（為 JS 添加了型別系統）。
TypeScript 是微軟開發的開源程式語言，設計目標是開發大型應用。
可以在任何瀏覽器、任何計機、任何作業系統上執行。
1.2 TypeScript 相比 JS 的優勢
JS 的型別系統存在“先天缺陷” ，絕大部分錯誤都是型別錯誤（ Uncaught TypeError ）。
- 優勢一：型別化思維方式，使得開發更加嚴謹，提前發現錯誤，減少改 Bug 時間。
- 優勢二：型別系統提高了程式碼可讀性，並使維護和重構程式碼更加容易。
- 優勢三：補充了介面、列舉等開發大型應用時 JS 缺失的功能。
- Vue 3 原始碼使用 TS 重寫，釋放出重要訊號：TS 是趨勢。
- Angular 預設支援 TS；React 與 TS 完美配合，是很多大型專案的首選。
1.3 開發工具準備
1.3.1 開發工具
- 寫程式碼的工具：Visual Studio Code（簡稱：VSCode），微軟開發的程式碼編輯工具。
- 執行 TS / JS 程式碼的工具：Node.js，一個基於 Chrome 瀏覽器 V8 解析引擎的 JavaScript 執行環境。
1.3.2 解析 TS 的工具包
什麼要安裝這個工具包？
- Node.js/瀏覽器，只認識 JS 程式碼，不認識 TS 程式碼。
- 需要先將 TS 程式碼轉化為 JS，然後就可以在 Node.js/瀏覽器中運行了。
安裝解析 TS 的工具包
npm i -g typescript
typescript：就是用來解析 TS 的工具包。提供了 tsc 命令，實現了 TS -> JS 的轉化。
npm：用來安裝前端開發中用到的包，是安裝 Node.js 時自動安裝的。
i（install）：表示安裝。
-g（–global）：全域性標識，可以在任意目錄中使用該工具。
1.4 建立TS檔案
1.4.1 步驟
（1）建立ts檔案
① 在桌面中建立資料夾：code。
② 在資料夾上點選滑鼠右鍵，然後點選 Open With Code（用VSCode開啟資料夾）。
③ 在 VSCode 中新建ts檔案：hello.ts（注意：檔案字尾名為 .ts）。
（2）寫程式碼：在 hello.ts 檔案中，寫入以下程式碼，並儲存。
console.log('Hello TS')
(3）執行ts檔案
問題1：TS 程式碼能直接在 Node.js 裡面執行嗎？不能
問題2：該如何處理呢？TS程式碼 -> JS程式碼 2 執行JS
3.執行程式碼，分兩步：
① TS程式碼 -> JS程式碼：在當前目錄開啟終端，輸入命令 tsc hello.ts 敲回車。tsc hello.ts② 執行JS：輸入命令 node hello.js（注意：字尾為 .js）。
解釋：
- tsc hello.ts 會生成一個 hello.js 檔案。
- node hello.js 表示執行這個 JS 檔案中的程式碼。
1.4.2 簡化執行TS的步驟
問題：每次修改程式碼後，都要重複執行兩個命令才能執行 TS 程式碼，太繁瑣。
執行 TS 程式碼的兩個步驟：
- tsc hello.ts
- node hello.js
簡化方式：使用 ts-node 包，“直接”在 Node.js 中執行 TS 程式碼。
安裝命令：
npm i –g ts-node
使用方式：
ts-node hello.ts
解釋：
- ts-node 包內部偷偷的將 TS -> JS，然後，執行 JS 程式碼。
- ts-node 包提供了命令 ts-node，用來執行 TS 程式碼。
現在只需一步：
ts-node hello.ts
1.5 註釋和輸出語句
1.5.1 註釋
註釋是對程式碼的解釋說明，用來幫助閱讀和理解程式碼。
注意：註釋的內容是不會執行的。
推薦在寫程式碼時，新增程式碼註釋，增加程式碼的可讀性。
例如：
北冥有魚，其名為鯤1。
注1：鯤(kūn)，本指魚卵，此處借用為表大魚之名。
註釋有兩種形式：1 單行註釋 2 多行註釋。
形式一：單行註釋
// 兩個斜線，表示單行註釋，只能註釋這一行內容
// 這是第二行註釋
// 快捷鍵：ctrl + /
形式二：多行註釋
/*
這是多行註釋
可以註釋多行內容
快捷鍵：shift + alt + a
*/
1.5.2 輸出語句
作用：在終端（黑視窗）中列印資訊。
Node.js 會執行我們寫的程式碼，為了能夠知道程式碼執行的結果，就需要使用輸出語句，將結果打印出來。
console.log('Hello TS')
解釋：
- console 表示控制檯，在 Node.js 中，指的是終端（黑視窗）。
- 小括號中的內容，表示要列印的資訊。