如何在不使用TypeScript的情况下检查JavaScript的类型

72 阅读3分钟

如果你没有生活在岩石下,你对TypeScript有所了解。它是微软推出的一种新语言,基本上是带有类型的JavaScript(并编译成JavaScript在浏览器中运行)。

现在,我在一些测试项目中使用了它,但出于各种原因,我倾向于避免用TypeScript写我的教程。

首先,我主要是写初学者的教程,而TypeScript通常不是人们开始使用的。

另外,我认为如果我开始用TypeScript写东西,会带来混乱--我在说什么?

TypeScript爱好者仍然可以利用JavaScript教程,因为JavaScript可以很好地融入他们的TypeScript文件,而反之则不行。

所以,我坚持讲网络平台的基本原理,而不是讲建立在它之上的技术。

这就是说...

有些时候,我也会从JavaScript中的类型中受益。它们很有帮助。

多亏了Paul Lewis的这个视频,我发现我们确实可以在JavaScript中使用类型,使用Visual Studio Code!

首先,你需要安装TypeScript,如果你还没有的话。

npm install -g typescript

然后你在项目的根部添加一个tsconfig.json 文件。假设你的JavaScript文件在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
}

现在,由于第二个参数有一个默认值,我们可以调用这个函数,用

来乘以20,或者像这样来乘以10。

但是如果你传递,例如,一个字符串作为第二个参数,像multiply(20, 'hey') ,VS Code现在会告诉你有一个问题。

类型为'"嘿 "的参数不能分配给类型为'数字'的参数

真棒!我们可以执行这种类型检查。

我们也可以对那些没有默认值的参数进行这种类型检查。你可以使用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。否则,还有TypeScript。