TypeScript basic
什麼是 TypeScript ?
TypeScript is an open source, typed syntactic superset of JavaScript
TypeScript 是加強版的 JavaScript (超集 Superset)，加強了 Type 的部分，讓開發者在編寫程式時可以指定變數的類型，讓變數保持一致的類型，有助於減少錯誤，以及提高程式碼的穩定性和可讀性。
TypeScript 在編譯階段可以做型別檢查，發現型別錯誤，但即使 TypeScript 編譯報錯，也可以產生 JavaScript 檔案
- 編譯為乾淨、可讀的 JS
- 三部分：語言、語言伺服器和編譯器
- 有點像花哨的 linter — 純粹在構建時提供幫助
為什麼型別很重要？
允許開發者將更多的「意圖」撰寫出來，特別是在闡明限制時。TypeScript 會將一些常見的程式錯誤從執行期間轉移到編譯時。
常見型別列表
- JS 基礎型別：
boolean、number、string、null、void、undefined、symbol - 物件型別：
array、function、object、Tuple、interface、enum、class - 特殊型別：
any、never、unknown
Tsconfig 設定檔
{
"compilerOptions": {
"target": "ES2015", // 編譯出來的 ECMAScript 版本
"module": "commonjs", // compile 後程式碼會用 commonjs 來處理模組的匯出匯入
"noImplicitAny": true, // 是否禁止隱含的 any 型別
"allowJs": false, // 是否允許匯入 js 檔，會影響到 include 時解析的副檔名是否包含（.js 和 .jsx）
"rootDir": "src", // 如果沒設定會套用預設值（TS 自動判斷）
"outDir": "dist", // TS 編譯輸出資料夾
/* Strict Type-Checking Options */
"strict": true,
/* Additional Checks */
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true, // 確保 switch case 都會有 break 或 return
/* Module Resolution Options */
"baseUrl": "./", // 匯入模組時，路徑可以使用從 baseUrl 開始，而不需要 ./../ 這種寫法
"paths": {
"@": ["src"] // 將 @ map 到 src
},
/* Source Map Options */
"sourceMap": true,
/* Advanced Options */
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true // 確保檔案的大小寫一致，避免某些作業系統對大小寫不敏感
},
"include": ["src"], // 編譯目標資料夾，表示會編譯src下所有的TS檔案
"exclude": ["docs"] // 排除不需要編譯的資料夾
}
TS 檔案類別
.ts文件包含類型資訊和運行的程式碼.js文件僅包含運行的程式碼.d.ts為聲明文件僅包含類型資訊
常用 TS 指令
npx 確保使用的是項目本地安裝的 TypeScript 套件，而不是全域安裝的 TypeScript
npx tsc --init #初始化typescript專案
npx tsc --watch #啟用監視模式，當ts檔案發生變化時，自動重新編譯
npx tsc --noEmit #用於只執行型別檢查，而不生成 JavaScript 代碼
npx tsc -b . # build
npx tsc -b . --clean # 移除掉打包後產生的檔案
npx tsc --showConfig > tsconfig.txt # 檢視實際上被 TypeScript 處理的檔案（最終吃到的設定檔）