/

如何在 JavaScript 中進行類型檢查而不使用 TypeScript

如何在 JavaScript 中進行類型檢查而不使用 TypeScript

了解如何在 JavaScript 中添加類型而不使用 TypeScript。

如果你不是住在岩石下，你應該對 TypeScript 有所了解。這是一種由微軟推出的新語言，基本上它是 JavaScript 加上了類型（並編譯成 JavaScript 在瀏覽器中運行）。

雖然我在一些測試專案中使用過 TypeScript，但是我傾向於避免使用 TypeScript 來編寫我的教程，原因有很多。

首先，我主要編寫初學者教程，而 TypeScript 通常不是初學者開始的東西。

另外，我認為如果我開始使用 TypeScript 來編寫文章，就會引起混亂，不知道我在談論什麼。

TypeScript 的愛好者仍然可以參考 JavaScript 教程，因為 JavaScript 可以很好地適應他們的 TypeScript 文件，而反之則不行。

所以，我堅持學習網頁平台的基本知識而不是建立在其之上的技術。

儘管如此…

有時候在 JavaScript 中擁有類型將是有益的。它們是有幫助的。

感謝 Paul Lewis 的這個視頻，我發現我們實際上可以在 JavaScript 中擁有類型，並使用 VS Code 實現！

首先，如果你還沒有安裝 TypeScript，你需要進行安裝：

1
npm install -g typescript

然後在你的項目根目錄中添加一個 tsconfig.json 文件。假設你的 JavaScript 文件在 src 文件夾中，以下是你在該文件中所需的最小配置：

1
2
3
4
5
6
7
8
9
10
{
 "compilerOptions": {
 "outFile": "../../built/local/tsc.js",
 "checkJs": true,
 "allowJs": true
 },
 "include": [
 "src/*"
 ]
}

你可以選擇排除文件夾，例如排除 node_modules 是一個好主意：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
 "compilerOptions": {
 "outFile": "../../built/local/tsc.js",
 "checkJs": true,
 "allowJs": true
 },
 "include": [
 "src/*"
 ],
 "exclude": [
 "node_modules",
 ]
}

現在，VS Code 可以指出我們的 JavaScript 代碼中的類型錯誤。

並且它可以自動進行，無需我們做任何事情。

特別是，它可以使用默認值來推斷函數參數的類型。

假設我們有這樣一個函數，其中 times 被賦予了默認值 2：

1
2
3
const multiply = (aNumber, times = 2) => {
 return aNumber * times
}

現在，由於第二個參數有默認值，我們可以這樣調用此函數：

1
multiply(20)

將 20 乘以 2，或者這樣來將其乘以 10：

1
multiply(20, 10)

但是，如果你傳遞了一個字符串作為第二個參數，比如 multiply(20, 'hey')，VS Code 將告訴你有問題：

類型“’hey’”的參數無法賦值給類型“number”的參數

太棒了！

我們還可以對沒有默認值的參數進行類型檢查。你可以使用 JSDoc 來實現，JSDoc 通常用作 API 生成器，並添加類型提示：

1
2
3
4
5
6
/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
 return aNumber * times
}

⚠️ 不要忘記注釋的開頭要加上兩個 **，否則事情將不會按預期工作。

現在，如果你嘗試調用 multiply('ho!')，你也會得到一個錯誤：

類型“’ho!’”的參數無法賦值給類型“number”的參數

除了 number 之外，你還可以設置以下類型：

  • null
  • undefined
  • boolean
  • string
  • Array
  • Object

例如：

1
2
3
4
5
6
7
8
9
10
11
/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
 console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}

現在，當然，不需要在註釋中添加註釋並且代碼本身告訴你真相將是更好的。如果你可以接受這種方式做事，很好！否則，可以考慮使用 TypeScript。

tags: [“JavaScript”, “types”, “VS Code”, “JSDoc”]