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

If you haven’t been living under a rock, you know something about TypeScript. It’s a new language introduced by Microsoft, and it’s basically JavaScript with types (and compiles to JavaScript to run in the browser).

如果您还没生活在一块石头上，那么您会了解TypeScript 。 它是Microsoft引入的一种新语言，基本上是带有类型JavaScript(并编译为JavaScript以在浏览器中运行)。

Now, I used it in some test projects but I tend to avoid writing my tutorials in TypeScript for various reasons.

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

The first is that I mostly write beginners tutorials and TypeScript is not usually what people start with.

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

Also, I think that if I start writing things in TypeScript, I’d introduce confusion - what am I talking about?

另外，我认为如果我开始用TypeScript编写东西，就会引起混乱-我在说什么？

TypeScript fans can still make use of JavaScript tutorials, since JavaScript can fit very well into their TypeScript files, while the opposite is not true.

TypeScript爱好者仍然可以使用JavaScript教程，因为JavaScript可以很好地适合他们的TypeScript文件，而事实恰恰相反。

So, I stick to the fundamentals of the Web Platform rather than on technologies that build on top of it.

因此，我坚持使用Web平台的基础，而不是基于Web平台的技术。

That said…

那说...

There are times where I’d benefit from having types in JavaScript. They are helpful.

有时候我会受益于JavaScript中的类型。 他们很有帮助。

Thanks to this video by the awesome Paul Lewis, I found that we can actually have types in JavaScript, using Visual Studio Code!

多亏了Paul Lewis的精彩视频 ，我发现我们实际上可以使用Visual Studio Code 在JavaScript中创建类型 ！

First, you need TypeScript installed, if you haven’t already:

首先，您需要安装TypeScript(如果尚未安装)：

npm install -g typescript

Then you add a tsconfig.json file to the root of your project. Assuming you have the JavaScript files in the src folder, this is the minimum amount of configuration you need in that file:

然后，将tsconfig.json文件添加到项目的根目录。 假设src文件夹中有JavaScript文件，这是该文件中所需的最少配置：

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

You can decide to exclude folders, for example it’s a good idea to exclude node_modules:

您可以决定排除文件夹，例如，排除node_modules是一个好主意：

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

Now, VS Code can point out type errors in our JavaScript code.

现在，VS Code可以指出我们JavaScript代码中的类型错误。

And it can do it automatically, without us having to do anything.

它可以自动完成，而无需我们做任何事情。

In particular, it can infer the types of function parameters using the default value.

特别是，它可以使用默认值推断功能参数的类型。

Say we have this function, where times is assigned the default value of 2:

假设我们有此功能，其中为times分配了默认值2：

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

Now since the second parameter has a default value, we can call this function with

现在，由于第二个参数具有默认值，我们可以使用

multiply(20)

to multiply 20 by 2, or like this to multiply it by 10:

将20乘以2，或像这样将其乘以10：

multiply(20, 10)

But if you pass, for example, a string as the second parameter like multiply(20, 'hey'), VS Code will now tell you there’s a problem:

但是，例如，如果您将字符串作为第二个参数(如multiply(20, 'hey')传递，VS Code现在将告诉您存在问题：

Argument of type ‘“hey”’ is not assignable to parameter of type ‘number’

类型“ hey”的参数不能分配给类型“ number”的参数

Awesome!

太棒了！

We can perform this kind of type checking also for arguments that don’t have a default value. You can do so using JSDoc, which is normally used as an API generator, and adding type hints:

我们也可以对没有默认值的参数执行这种类型检查。 您可以使用通常用作API生成器的JSDoc并添加类型提示来做到这一点：

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

⚠️ Don’t forget the double ** in the beginning of the comment, otherwise things will not work as expected.

⚠️不要忘记评论开头的双** ，否则事情将无法按预期进行。

Now if you try to call multiply('ho!') you’ll get an error too:

现在，如果您尝试调用multiply('ho!') ，也会得到一个错误：

Argument of type ‘“ho!”’ is not assignable to parameter of type ‘number’

类型“ ho！”的参数不能分配给类型“ number”的参数

Other than number, you can set the following types:

除number ，您可以设置以下类型：

• null

  null

• undefined

  undefined

• boolean

  boolean

• string

  string

• Array

  Array

• Object

  Object

Example:

例：

/**
 * @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)
}

Now, of course not having to add annotations in comments and having the code itself tell you the truth would be better. If you can live with this way of doing things, great! Otherwise, there’s TypeScript.

现在，当然不必在注释中添加注释，而让代码本身告诉您真相会更好。 如果您可以忍受这种做事方式，那就太好了！ 否则，有TypeScript。

翻译自: https://flaviocopes.com/how-to-check-types-javascript/