跳至主要内容

TS 的 config 設定問題

1. 自動引入 ts 模組？​

我們可以將多個 type 型別設定統一整理在一個 .ts 中，並且使用 export & import 的方式來引入到需要的地方；
但如果有上百個 type 要 export 跟 import 就會變的很麻煩，
此時可以在 tsconfig.ts 將 type 設定為全域

怎麼做？​

tsconfig.ts
//...
// },
"include": ["src/**/*"]

這樣就可以直接不需要 import 就直接引入 type

main.ts
const user: TUserBase = {
  name: "Clove",
  age: 20,
  userAddress: "Taiwan"
}

2. 在 TS 專案中使用 JS module​

有時候必須要引入第三方或是其他的 JS 模組，此時一定會噴錯；如果要認真去 debug 會瘋掉… 所以這時候會直接不對 JS 檔案進行檢查

怎麼做？​

tsconfig.ts
"allowJs": true,
"checkJs": false,
},
//"include": ["src/**/*"]
  • 第一個是識別 JS 的檔案
  • 第二個是不對 JS 檔案進行型別檢查
main.js
import { getRandomInt } from "../lib/randomFn.js";

getRandomInt(2,5);

此時引入 JS 模組就不會噴錯了

3. 讓 TS 為瀏覽器做型別檢查​

在瀏覽器環境中使用 document、window 等 API 時，TypeScript 可能會報錯說找不到這些型別；
這是因為 TypeScript 不知道你的程式碼會在瀏覽器環境中運行

怎麼做？​

tsconfig.ts
{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}
  • "ES2020"：告訴 TS 可以使用 ES2020 的 JavaScript 特性
  • "DOM"：告訴 TS 可以使用瀏覽器的 DOM API（如 document、window）
main.ts
// 現在可以使用瀏覽器 API 了
const title = document.getElementById('title');
window.addEventListener('click', () => {
  console.log('clicked!');
});

這樣 TypeScript 就能正確檢查瀏覽器相關的型別了

資訊

https://www.typescriptlang.org/tsconfig/ 官方文件

4. 搭配第三方套件​

搭配第三方套件的話有種情況：

  1. 套件本身有提供 TS 型別宣告檔案 (例：import axios, { AxiosResponse } from "axios")
  2. 套件沒有提供，但 TS 有 (例：npm install --save @types/lodash)
資訊

https://www.npmjs.com/~types TS 官方提供常見套件型別定義檔案

5. Vite build.target​

在 Vite 專案中，build.target 會決定打包結果需要支援到哪個 JavaScript 版本或瀏覽器；
若專案要支援較舊的環境，記得同步調整這個設定，否則輸出的 bundle 可能包含未被舊瀏覽器支援的語法

怎麼做？​

vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    target: ["es2018", "chrome64", "safari12"],
    // 或者直接使用 "esnext" 讓 Vite 瞄準最新語法，視支援目標而定
    target: 'esnext',
  }
});
  • 值可以是單一字串（例如 "es2018"）或瀏覽器列表（例如 "chrome64"）。
  • 如果同時使用 tsconfig.json 的 compilerOptions.target，建議兩邊設定一致，避免 TypeScript 輸出與 Vite 轉譯目標不一致。
  • 並且安裝 npm install @types/node --save-dev 型別定義檔案
資訊

https://esbuild.github.io/content-types/