在JavaScript中获得TypeScript的好处

前端


当我们使用TypeScript而不是JavaScript编写应用程序时，很明显我们会从类型安全性中受益，使我们免受潜在的错误困扰。

然而，您可能有充分的理由不使用TypeScript编写项目。例如，迁移现有的JavaScript项目可能需要太多的工作。尽管如此，您仍然可以获得许多TypeScript的好处。

好处

TypeScript对我们的JavaScript代码的主要作用是突出显示意外行为。TypeScript会跨代码库推断类型，这意味着它可以发现您可能会在数字上调用字符串方法等情况。

1
2
const a = 1;
console.log(a.toUppercase());

这个例子可能微不足道，但是JavaScript会让您编写和运行该代码，并最终发现您已经引发了运行时错误。TypeScript编译器可以分析该JavaScript代码，告诉您数字没有名为toUppercase的函数，并帮助您更早地捕获错误。然而，我们需要在我们的JavaScript项目中做一些工作，才能从这种分析中受益。

更多JavaScript的利用

TypeScript帮助我们更好地理解JavaScript，但是我们可以采取什么措施来进一步帮助TypeScript呢？
以下说明适用于VS Code，它对TypeScript的支持最好。

仅需添加一个注释

VS Code使这变得非常简单。在您正在编写的任何JavaScript文件的顶部添加注释// @ts-check，TypeScript将分析内容，并在看起来不合适的地方用红色波浪线提醒您。在这里，您可以看到我们原始代码片段的不同之处：


通过添加注释启用TypeScript检查是尝试了解它提供了什么的好方法。缺点是它仅分析单个文件，并且只有在您记得添加注释时才进行分析。此外，如果您的团队其他成员目前对TypeScript没有兴趣，那么在文件中留下特定于TypeScript的注释可能不会被接受。

打开TypeScript开关

VS Code还允许您在不更改源代码的情况下为所有JavaScript启用TypeScript检查。打开设置并搜索Check JS。您会找到设置JS/TS › Implicit Project Config: Check JS。

为工作区启用此设置，VS Code将使用TypeScript来对项目中打开的所有文件进行类型检查。在用户级别启用该设置，VS Code将在您工作时使用TypeScript来检查所有项目。

建议激活Check JS设置。它会在您编写和维护代码时教会您关于JavaScript的知识。

在您的编辑器中启用Check JS后，您可以努力解决TypeScript编译器发现的问题，而不必担心为应用程序添加配置。此外，如果事实证明TypeScript编译器引发了一堆问题，它们只在您的编辑器中可见，不会破坏您的构建。

如果您和您的团队尝试使用TypeScript这种方式，并发现它有益，您可能会考虑采取下一步，并直接将TypeScript引入您的项目。

JavaScript项目添加TypeScript

将TypeScript引入您的项目意味着TypeScript成为您的整个团队可以使用的工具。您可以将其作为构建和测试流程的一部分，以确保您编写的JavaScript满足TypeScript的约束条件，稍后，您甚至可以开始添加更多类型，而无需将单个文件类型更改为.ts。

首先，将TypeScript安装为开发依赖项。

1
npm install typescript --save-dev

创建一个tsconfig.json文件。我发现使用TypeScript初始化最简单。运行此命令：

1
npx tsc --init

打开新生成的tsconfig.json文件。当您启动新的TypeScript项目时，这里的默认设置很好，但是我们需要更改一些选项来处理JavaScript项目。将您的tsconfig.json更新为此：

1
2
3
4
5
6
7
8
9
10
11
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true
  }
}

重要的设置包括allowJS和checkJS。当为true时，这些设置允许JavaScript成为TypeScript应用程序的一部分，然后对JavaScript文件应用类型检查。checkJS设置相当于在您的VS Code设置中启用Check JS。

值得注意的是，设置的tsconfig.json文件将覆盖VS Code设置，并在其他编辑器中启用TypeScript检查。

我还包含了noEmit设置，因为在此阶段，我们不尝试编译JavaScript；我们只是想对其进行类型检查。noEmit: true表示TypeScript编译器不会尝试输出任何内容；它只会报告读取的JavaScript。

我们暂时将strict设置为false；使JavaScript代码遵循TypeScript的严格模式相当困难。

为您的package.json添加一个脚本来运行类型检查：

1
2
3
"scripts": {
  "type-check": "tsc"
}

现在，您可以运行npm run type-check并查看结果。

修复缺少的类型

由于您在此项目中尚未使用TypeScript，您可能需要进行一些修改。首先，如果您正在使用·Node.js·，则需要为·Node.js·添加·TypeScript·类型。

1
npm install @types/node --save-dev

Definitely Typed可以为不提供自己类型的模块提供类型，并且它非常全面。如果Definitely Typed具有您的模块的类型，您可以从@types范围在您的项目中安装它。

作为可选添加，您可以为您使用的不提供自己类型的包从Definitely Typed添加类型。如果您不安装这些类型，则TypeScript将把从包导入的内容视为任意类型。

any类型是TypeScript的通用类型。它使程序编译，但不提供有关您正在使用的对象的任何进一步信息。当您为这些包添加或定义类型时，TypeScript可以帮助自动完成并突出显示潜在问题。我建议在开始处理使用它们的源代码部分时为依赖项安装类型。

修复你的代码

接下来，你可能会发现TypeScript报告了你代码中的一些错误。这正是我们想要的！

任何提出的问题都是你应用程序中潜在的运行时错误，现在TypeScript已经检测到了。你可以在编辑器中或当你运行类型检查脚本时看到这些错误。修复这些错误将提高你应用程序的可靠性。现在TypeScript已经成为你项目的一部分，类似这样的问题不应该再漏过去了。

加入构建流程

一旦类型检查过程成功返回，你可能希望将检查加入到你的构建流程中。这将确保你的代码库对于一个JavaScript项目来说保持尽可能类型安全。

你如何实现这一点取决于你现有的测试和构建流程。一个选项是将类型检查过程作为测试套件的一部分运行。

1
2
3
4
"scripts": {
  "type-check": "tsc",
  "test": "node --test && npm run type-check"
}

TypeScript可以帮助你编写更好的JavaScript

正如我们在本文中看到的那样，你不必将你的项目从JavaScript转移到TypeScript来获得好处；你只需让TypeScript编译器帮助你。Webpack和``Svelte项目都是这样做的。查看它们的源代码，JavaScript文件用于代码，TypeScript声明文件用于类型。

让TypeScript分析你的代码，无论是在你的编辑器中还是作为你项目的一部分，都会给你更多关于类型在你的应用程序中如何流动的见解。它可以帮助你编写更干净、更有意义的代码，并导致更可靠的应用程序。

涅槃快乐热爱生活，追求技术

个人简介。