TypeScript：TSConfig 选项入门-js教程-PHP中文网

什么是 TypeScript？

TypeScript 是 JavaScript 的超集。这意味着您可以在 TypeScript 中使用 JavaScript 语法，因此最好在开始使用 TypeScript 之前学习 JavaScript。有了这个免责声明，我们来谈谈 TypeScript 是什么以及如何为 TypeScript 设置项目。

根据 TypeScript 的文档，“TypeScript 是一种基于 JavaScript 构建的强类型编程语言。”[1] TypeScript 语言添加了类型语法来帮助您在开发过程中及早发现错误，并在开发团队成长的过程中保持保障措施随着项目规模的扩大。 TypeScript 允许您定义变量的数据类型和对象的接口。 TypeScript 使用这些定义来检查您的代码在编译时是否有错误，并在您不遵循事先设置的定义时通知您。

如果您在想，“既然我一开始就可以更加小心，为什么我需要编写更多代码来使用 TypeScript？”你没有错，但人类会犯错误，而且我们在长时间工作时经常会犯错误。如果同样的想法应用到施工中，那么额外的脚手架和安全程序将需要更多的工作和时间，而我们只要在工地小心一点就可以节省时间。

TypeScript: Getting Started With TSConfig Options

看到了吗？为了节省时间，这位屋顶工可能浪费了更多的时间和资源。这只是一名工人。想象一下，随着更多团队成员的加入，一个工作团队正在处理一个项目。这就是软件开发的现实；从长远来看，制定一个计划来发现这些错误将对您和您的团队有所帮助。

TypeScript 示例

以下示例来自 TypeScript 文档[2]，但注释是我的。

打字稿：

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

登录后复制

TypeScript 将在调用greet 时捕获错误。我们定义greet 来接收两个参数：person 和date，并且我们只提供person。 TypeScript 在编译代码时会捕获此错误，并让您知道它需要第二个参数。在某种程度上，TypeScript 可以被视为代码的 linter，以便在您工作时捕获这些错误，但我们可以利用类型语法来进一步帮助我们。

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

登录后复制

现在，我们为 toDateString 方法的两个参数添加一个类型，person 必须是字符串，date 必须是 Date 对象。当在第二个参数 Date() 之前不使用关键字 new 来调用greet时，TypeScript 会让您知道它收到了一个字符串，而不是日期参数的 Date。现在，您可以在进一步开发之前修复错误，并且在测试时收到意外输出时必须追溯到此错误。

现在您已经看到了 TypeScript 的实际应用，让我们检查一下设置项目以使用它的后续步骤。

配置 TypeScript 的编译器：tsconfig.json

默认的 TypeScript 编译可能不是您想要的，有一种方法可以根据您的需求自定义 TypeScript，类似于使用 linter，但它可以做更多的事情。

第一步是在项目的根目录中创建一个 tsconfig.json 文件。该文件告诉 TypeScript 编译过程中应包含哪些文件。在 tsconfig.json 中，如果您希望使用 JSON 文件的“includes”键获得更多特异性，则可以指定应包含在根目录中的目录。

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

登录后复制

现在，我们来谈谈“compilerOptions”。相信我，有很多选择可供选择。这是一件好事，但如果这是您第一次使用 TypeScript，也会很可怕。我将分解一些流行的选择来帮助您入门：

允许

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

登录后复制

此选项允许将 JavaScript 文件导入到您的项目中，而不仅仅是 TypeScript。通常，TypeScript 假定所有导入都是 TypeScript，并且会对导入的 JavaScript 文件给出错误，但此选项允许我们使用这些导入，并且在同一存储库中使用 TypeScript 和 JavaScript 时会很有帮助。

esModuleInterop

{
  "include": ["src/**/*"]
}

登录后复制

ES6 中的命名空间导入只能是一个对象，但由于这与使用不带 .default 的 require 相同，因此我们允许 TypeScript 将对象视为函数。当 TypeScript 将代码转换为 JavaScript 时，此选项将解决此问题，而不必小心我们的导入。

目标

{
  "compilerOptions": {
    "allowJs": true
  }
}

登录后复制

当 TypeScript 将代码转换为 JavaScript 时，此选项会更改哪些 JS 功能被降级以及哪些功能保持不变。 es6 是一个不错的选择，因为大多数现代浏览器都支持 ES6，但您可以为此选项指定任何版本的 ECMAScript 以满足您的需求。

严格的

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

登录后复制

此标志支持许多不同的类型检查行为。这将带来更强大的代码库和更少的错误。如果您想排除某些类型检查行为，请检查文档 [3] 并将其选项设置为 false。如果您只想要一些类型检查行为，我会考虑打开它们而不是使用 strict。

输出目录

{
  "compilerOptions": {
    "target": "es6"
  }
}

登录后复制

当 TypeScript 将代码转换为可用的 JavaScript 时，此选项会将这些文件发送到此目录中。

不发射

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

登录后复制

此选项会停止发出所有已转译的 JavaScript 文件。这可能听起来很愚蠢，因为我刚刚告诉过您有关 outDir 的信息，但 TypeScript 始终会发出文件，而 outDir 会将文件定向到正确的位置。当您已经使用 Babel 或 Webpack 等其他工具来转译和捆绑代码时，noEmit 就会发挥作用。在这种情况下发出意味着创建无用的 JavaScript 文件。

结论

给你了。这七个选项可帮助您设置 TypeScript 配置以及 TypeScript 如何帮助您创建更稳定的代码库。我建议阅读 Matt Pocock 的“TSConfig Cheat Sheet”，了解更多流行的选项以放入 tsconfig.json 中，并在实现任何这些选项之前始终参考 TSConfig 上的 TypeScript 文档。

编码快乐！
泰勒·迈耶