如何在 vs code 中啟用 typescript 類型檢查？1. 安裝 node.JS 和 npm 或 yarn；2. 全局安裝 typescript：使用 npm install -g typescript 或 yarn global add typescript；3. 在項目中創建 tsconfig.json 文件并配置編譯選項，關鍵設置為 “strict”: true 以啟用嚴格模式。vs code 將自動進行類型檢查，并在“問題”面板顯示錯誤和警告。常見錯誤如變量未定義或類型不匹配可通過修正拼寫、引入模塊或使用類型斷言解決?？赏ㄟ^ tsconfig.json 自定義規則，如啟用 noimplicitany 和 strictNULLchecks 提高類型安全性?？墒褂妙愋蛿嘌曰?@ts-ignore 忽略特定錯誤，但應謹慎使用。調試 typescript 需創建 launch.json 文件配置調試器，結合 prelaunchtask 編譯代碼。通過安裝 eslint 和 prettier 并配置插件，可在 vs code 中實現 typescript 代碼的自動格式化與規范檢查，提升代碼質量與一致性。
啟用 vscode 的 TypeScript 類型檢查，簡單來說，就是讓 VSCode 成為你的代碼質量衛士，在你寫代碼的時候就告訴你哪里可能出錯了。這樣能大大減少運行時錯誤，提高開發效率。
啟用類型檢查的方法其實很簡單，但要真正用好，還得了解一些配置細節。
TypeScript 類型檢查配置
如何在 VS Code 中啟用 TypeScript 類型檢查？
首先，你需要確保已經安裝了 Node.js 和 npm (或 yarn)。然后，全局安裝 TypeScript：
npm install -g typescript
或者，如果你更喜歡使用 yarn：
yarn global add typescript
接下來，在你的 VS Code 項目中，創建一個 tsconfig.json 文件。這個文件是 TypeScript 項目的配置文件，告訴 TypeScript 編譯器如何編譯你的代碼。一個最簡單的 tsconfig.json 文件可能長這樣：
{ "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } }
strict: true 是關鍵，它啟用了 TypeScript 的嚴格模式，會進行更嚴格的類型檢查。
有了 tsconfig.json 文件，VS Code 就會自動啟用 TypeScript 類型檢查。你可以在 VS Code 的“問題”面板（View -> Problems）中看到類型檢查的錯誤和警告。
TypeScript 類型檢查報錯如何解決？
類型檢查報錯是很常見的，不要害怕。報錯信息通常會告訴你哪里出錯了，以及為什么出錯。
一種常見的錯誤是 “Cannot find name ‘xxx'”。這通常意味著你使用了未定義的變量或函數。解決辦法是檢查變量名是否拼寫正確，或者是否忘記引入相關的模塊。
另一種常見的錯誤是 “Type ‘xxx’ is not assignable to type ‘yyy'”。這通常意味著你試圖將一個類型的值賦給另一個類型的變量，而這兩個類型不兼容。解決辦法是檢查類型是否匹配，或者使用類型斷言來告訴 TypeScript 你知道自己在做什么。
例如，你可能遇到這樣的情況：
let myNumber: number = "123"; // 錯誤：不能將字符串賦值給數字
解決辦法很簡單，把字符串改成數字：
let myNumber: number = 123;
或者，如果你確實需要將字符串轉換為數字，可以使用 parseInt 或 parseFloat：
let myNumber: number = parseInt("123");
如何自定義 TypeScript 類型檢查規則？
tsconfig.json 文件提供了很多選項，可以讓你自定義 TypeScript 的類型檢查規則。
例如，你可以使用 noImplicitAny 選項來禁止隱式的 any 類型。這意味著如果你沒有顯式地指定變量的類型，TypeScript 會報錯。這可以幫助你避免一些潛在的類型錯誤。
{ "compilerOptions": { "noImplicitAny": true } }
你還可以使用 strictNullChecks 選項來啟用嚴格的空值檢查。這意味著 TypeScript 會檢查變量是否可能為 null 或 undefined，并在你試圖使用這些變量時發出警告。這可以幫助你避免一些空指針異常。
{ "compilerOptions": { "strictNullChecks": true } }
除了這些常用的選項之外，還有很多其他的選項可以讓你自定義 TypeScript 的類型檢查規則。你可以參考 TypeScript 的官方文檔來了解更多信息。
如何忽略 TypeScript 類型檢查錯誤？
有時候，你可能需要忽略一些 TypeScript 的類型檢查錯誤。例如，你可能正在使用一個第三方庫，它的類型定義不完整，導致 TypeScript 報錯。
你可以使用類型斷言來告訴 TypeScript 你知道自己在做什么。類型斷言有兩種語法：
// 尖括號語法 let myVariable: any = "hello"; let myString: string = <string> myVariable; // as 語法 let myVariable: any = "hello"; let myString: string = myVariable as string;
這兩種語法的作用是一樣的，都是告訴 TypeScript myVariable 實際上是一個字符串。
你還可以使用 @ts-ignore 注釋來忽略 TypeScript 的類型檢查錯誤。
// @ts-ignore let myVariable: any = 123;
@ts-ignore 注釋會忽略下一行的類型檢查錯誤。但是，你應該盡量避免使用 @ts-ignore 注釋，因為它會隱藏潛在的類型錯誤。只有在你知道自己在做什么，并且確定不會導致運行時錯誤的情況下，才應該使用 @ts-ignore 注釋。
如何在 VS Code 中調試 TypeScript 代碼？
VS Code 提供了強大的調試功能，可以讓你在 VS Code 中調試 TypeScript 代碼。
首先，你需要創建一個 launch.json 文件。這個文件告訴 VS Code 如何啟動你的應用程序。一個簡單的 launch.json 文件可能長這樣：
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/dist/index.js", "preLaunchTask": "tsc: build - tsconfig.json", "outFiles": [ "${workspaceFolder}/dist/**/*.js" ] } ] }
program 選項指定了要運行的 JavaScript 文件的路徑。preLaunchTask 選項指定了在啟動應用程序之前要運行的任務。在這個例子中，我們使用 tsc: build – tsconfig.json 任務來編譯 TypeScript 代碼。
有了 launch.json 文件，你就可以在 VS Code 中啟動調試器了。你可以設置斷點，單步執行代碼，查看變量的值，等等。
調試 TypeScript 代碼可以幫助你更好地理解代碼的執行過程，找出潛在的錯誤。
如何使用 ESLint 和 Prettier 來格式化 TypeScript 代碼？
ESLint 和 Prettier 是兩個流行的代碼格式化工具。ESLint 可以檢查你的代碼是否符合編碼規范，Prettier 可以自動格式化你的代碼。
你可以使用 ESLint 和 Prettier 來格式化 TypeScript 代碼，保持代碼風格的一致性。
首先，你需要安裝 ESLint 和 Prettier：
npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier
或者，如果你更喜歡使用 yarn：
yarn add --dev eslint prettier eslint-plugin-prettier eslint-config-prettier
然后，創建一個 .eslintrc.js 文件，配置 ESLint：
module.exports = { parser: "@typescript-eslint/parser", plugins: ["@typescript-eslint", "prettier"], extends: [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "plugin:prettier/recommended" ], rules: { "prettier/prettier": "error" } };
創建一個 .prettierrc.js 文件，配置 Prettier：
module.exports = { semi: false, singleQuote: true, trailingComma: "all", printWidth: 120 };
最后，在 VS Code 中安裝 ESLint 和 Prettier 插件，并配置 VS Code 在保存文件時自動格式化代碼。
有了 ESLint 和 Prettier，你的 TypeScript 代碼將會更加規范、易讀。
希望這些能幫到你！
