有三種方法可以安裝 TypeScript

1. 透過套件管理工具 npm, yarn or pnpm 安裝 （⭐️ 本文會透過 npm 來安裝）
2. 透過 NuGet package 安裝 （.Net 環境）
3. 透過 Vistual Studio extension 安裝

🔗 Online 免安裝版：https://www.typescriptlang.org/play/

步驟 1：安裝 Node.js

有安裝的話可以跳過此步驟。 當你安裝 Node.js 時，npm（Node Package Manager）會自動一起被安裝，可以透過 npm 來安裝 TypeScript

步驟 2：安裝 TypeScript

https://www.npmjs.com/package/typescript

• 全局安裝
  任何專案皆可使用

npm install -g typescript

• 安裝到當前專案
  確保當前專案中的所有開發者都使用相同版本的 TypeScript，避免版本衝突。--save-dev 代表只在開發階段使用

npm install typescript --save-dev

步驟 3：建立資料夾並初始化 TypeScript Compiler

在終端機中，切換到當前資料夾
執行以下指令來初始化 TypeScript Compiler

tsc --init

tsc： TypeScript Compiler

執行後，會生成一個 tsconfig.json 檔案，裡面有先寫好一些默認配置（如下圖），可以在這裡設定 TypeScript 的配置選項

// 默認配置
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

以下來依依介紹一下：

• target: es2016

  • 指定編譯後的 JS 版本
  • es2016 = ECMAScript 2016（俗稱 ES7），代表會生成符合 es2016 規範的 JS

• module: commonjs

  • 指定編譯後的 JS 要使用哪種模組系統(module system)
  • CommonJS 是 Node.js 使用的標準模組，使用到 require / module.export 或 exports 來匯入、匯出模組

• strict: true

  • 是否啟用所有嚴格的型別檢查選項
  • 預設是自動啟用，可以根據專案需求再單獨關閉或註解特定選項的檢查
  • ⚠️ 官方提到未來可能會新增嚴格檢查的選項，如果升版的話，可能導致程式中出現新的型別錯誤

• esModuleInterop: true

  • 是否允許 TypeScript 導入符合 ES6 模組規範的模組（即使這些模組是使用 CommonJS 所寫)
  • 這個選項的目的是提高 TypeScript 和指定模組之間的相容性，對於引入外部套件很實用
  • false：導入模組會使用星號(*)或是 require 引入，例如： import * as moment from 'moment'; const moment = require("moment");
  • true：可以使用 ES 模組語法 import 來導入 CommonJS 模組，不需要使用 require。 例如：import moment from 'moment';

P.S. import 和 require 差異可以看 seafood 的鐵人文章

• skipLibCheck: true

  • 是否跳過對 .d.ts 文件的型別檢查（此類型的檔案常見於 libraries 或 node_modules）
  • 預設是 false
  • 當設置為 true 時，編譯器就不會檢查 node_modules 中的 .d.ts 文件，只會檢查你在 code 中實際引入的，可以減少編譯時間

• forceConsistentCasingInFileNames: true

  • 大小寫是否敏感
  • false：不敏感
  • true：敏感

P.S. tsconfig.json 的詳細配置選項後面會再介紹到

步驟 4：建立一個 XXXX.ts 檔案

.ts: 標準的 Typescript 檔
.tsx：React 中的 Typescript 檔
建立好檔案後，執行下方指令就會進行編譯，那為什麼會需要編譯呢？
因為瀏覽器讀不懂 TypeScript，需要編譯成 JavaScript 才能看得懂

tsc 檔案名稱<XXXX.ts>

編譯後會自動生成一個 XXXX.js 的檔案

步驟 5：自動化編譯(自選)

如果不想要每改動一次就要手動執行一次編譯，可以使用 --watch 參數
這樣檔案在保存的當下就會自動編譯囉～若要取消按 Ctrl + C 即可

tsc --watch

更多的 tsc options 可以點此

Reference

1. Understanding esModuleInterop in tsconfig file
2. skipLibCheck: true
3. TS in your project