TypeScript 和 Babel 7

作者：Daniel

日期：August 27th, 2018

原文：https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

今天我们很高兴为Babel用户宣布一些特别的东西。一年前，我们开始着手发现用户在使用TypeScript时遇到的最大困难，我们发现Babel用户的一个共同问题是尝试设置好TypeScript 太难了。原因通常各不相同，但对于许多开发人员来说，重写已经正在使用的构建配置可能是一项艰巨的任务。
Babel是一个出色的工具，拥有一个充满活力的生态系统，通过将最新的JavaScript特性转换为旧的运行时和浏览器，为数百万开发人员提供服但它不进行类型检查，我们的团队认为可以将这种体验带到另一个层次。虽然TypeScript本身可以同时执行这两项操作，但我们希望在不强制用户从Babel切换的情况下更轻松地获得该体验。

这就是为什么在过去的一年里我们与Babel团队合作，今天我们很高兴联合宣布Babel 7现在提供TypeScript支持！

我怎么使用它？

如果你已经在使用Babel并且你从未尝试过TypeScript，那么现在是你的机会，因为它比以往更容易。至少，您需要安装TypeScript插件。

1	npm install --save-dev @babel/preset-typescript

您可能还想获得TypeScript支持的其他ECMAScript特性：

1	npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

确保你的.babelrc中的presets和plugins配置正确：

{
    "presets": [
        "@babel/env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

一个使用@babel/cli编译的样例，你仅需要执行：

1	babel ./src --out-dir lib --extensions ".ts,.tsx"

你的文件现在构建并生成到了lib文件夹中。

使用TypeScript检查类型，需要创建一个tsconfig.json文件：

{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

然后执行tsc，仅仅就是这样！tsc将会对你的.ts和.tsx进行类型检查

随意添加–watch标志到任一工具，以便在任何变化时获得即时反馈。您可以在此示例存储库中查看如何设置更复杂的构建，该存储库与Webpack等工具集成。您也可以在Babel的在线REPL上使用TypeScript预设。

这对我意味着什么？

使用TypeScript编译器仍然是构建TypeScript的首选方法。虽然Babel可以接管编译/转换 - 执行诸如擦除类型和重写最新的ECMAScript功能以在较旧的运行时中工作 - 它没有内置类型检查，并且仍然需要使用TypeScript来实现这一点。因此，即使Babel构建成功，您也可能需要使用TypeScript介入以捕获类型错误。出于这个原因，我们认为tsc和compiler pipeline周围的工具仍然可以为大多数项目提供最好集成和一致的体验。

因此，如果您已经在使用TypeScript，那么这对您来说可能没什么变化。但是，如果您已经在使用Babel，或者对Babel生态系统感兴趣，并希望获得TypeScript的好处，例如捕获拼写错误，错误检查以及您可能在Visual Studio和Visual Studio等中看到的编辑体验代码，这是给你的！

注意事项

正如我们上面提到的，用户应该注意的第一件事是Babel不会对TypeScript代码执行类型检查;它只会转换你的代码，无论是否存在类型错误，它都会编译。虽然这意味着Babel不会像读取.d.ts文件那样做并确保你的类型兼容，但可能你会想要一些工具来做到这一点，所以你仍然需要TypeScript。这可以在后台作为单独的tsc –watch任务完成，也可以是构建中的lint / CI步骤的一部分。幸运的是，通过正确的编辑器支持，您甚至可以在保存之前发现大多数错误。

其次，有些结构Babel 7没有正确的编译。具体来说，

namespaces
括号风格的类型断言/强制转换语法，当启用JSX时可以忽略它们。（即，如果打开JSX支持，写入 x即使在.ts文件中也不起作用，但您可以将x as Foo）。
跨多个声明的枚举（即枚举合并）
遗留式导入/导出语法（即import foo = require（…）和export = foo）

这些遗漏主要基于Babel的单文件发射架构中的技术限制。我们相信大多数用户会发现这种体验是完全可以接受的。要确保TypeScript可以调出其中的一些遗漏，您应该确保TypeScript使用–isolatedModules标志。

接下来做什么？

您可以在发布博客文章中阅读Babel方面的详细信息。我们很高兴我们有机会与Babel团队的人们合作，如Henry Zhu，Andrew Levine，Logan Smyth，Daniel Tschinder，James Henry，Diogo Franco，Ivan Babak，NicolòRibaudo，Brian Ng和Vladimir Kurchatkin。我们甚至有机会加速Babylon，Babel的解析器，并帮助调整James Henry在typescript-eslint-parser上的工作，该解析器现在支持Prettier’s TypeScript。如果我们遗漏没有提到你，我们很抱歉，但我们很感激，我们感谢所有人们共同投入的帮助！

我们的团队将为TypeScript插件的未来更新做出贡献，我们期待为所有TypeScript用户带来出色的体验。展望未来，我们很乐意听到您对Babel中这种新TypeScript支持的反馈，以及我们如何使其更易于使用。在Twitter上@typescriptlang或下面的评论中给我们一个声音。

快乐的黑客！