如何在不使用TypeScript的情況下檢查JavaScript中的類型

了解如何在不使用TypeScript的情況下向JavaScript添加類型

如果您還沒有生活在一塊岩石下,那麼您就會了解打字稿。它是Microsoft引入的一種新語言,基本上是帶有類型的JavaScript(並編譯為JavaScript以在瀏覽器中運行)。

現在,我在一些測試項目中使用了它,但是出於各種原因,我傾向於避免使用TypeScript編寫教程。

首先是我主要寫初學者教程,而TypeScript通常不是人們開始使用的。

另外,我認為如果我開始用TypeScript編寫東西,就會引起混亂-我在說什麼?

TypeScript愛好者仍然可以使用JavaScript教程,因為JavaScript可以很好地適合他們的TypeScript文件,而事實恰恰相反。

因此,我堅持使用Web平台的基礎,而不是基於Web平台的技術。

那說...

有時候我會受益於JavaScript中的類型。他們是有幫助的。

謝謝這個視頻在令人敬畏的保羅·劉易斯(Paul Lewis)的幫助下,我發現我們實際上可以在JavaScript中使用類型, 使用Visual Studio程式碼

首先,您需要安裝TypeScript(如果尚未安裝):

npm install -g typescript

然後您添加一個tsconfig.json文件到項目的根目錄。假設您在src文件夾,這是您在該文件中所需的最少配置:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ]
}

您可以決定排除文件夾,例如,最好排除node_modules

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ]
}

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

它可以自動完成,而無需我們做任何事情。

特別是,它可以使用默認值推斷功能參數的類型。

說我們有這個功能,times分配了默認值2:

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

現在,由於第二個參數具有默認值,我們可以使用

multiply(20)

將20乘以2,或像這樣將其乘以10:

multiply(20, 10)

但是,例如,如果您將字符串作為第二個參數傳遞,例如multiply(20, 'hey'),VS Code現在會告訴您有問題:

類型“ hey”的參數不能分配給類型“ number”的參數

驚人的!

我們也可以對沒有默認值的參數執行這種類型檢查。您可以使用JSDoc,通常用作API生成器,並添加類型提示:

/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

⚠️不要忘記雙重**在評論的開頭,否則事情將無法按預期進行。

現在,如果您嘗試致電multiply('ho!')您也會收到錯誤消息:

類型“ ho!”的參數不能分配給類型“ number”的參數

以外number,您可以設置以下類型:

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

例子:

/**
 * @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。

免費下載我的JavaScript初學者手冊


更多js教程: