[译]TypeScript 和 Babel 7

做者：Daniel

日期：August 27th, 2018

原文：devblogs.microsoft.com/typescript/…

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

这就是为何在过去的一年里咱们与Babel团队合做，今天咱们很高兴联合宣布Babel 7如今提供TypeScript支持！

我怎么使用它？

若是你已经在使用Babel而且你从何尝试过TypeScript，那么如今是你的机会，由于它比以往更容易。 至少，您须要安装TypeScript插件。

npm install --save-dev @babel/preset-typescript
复制代码

您可能还想得到TypeScript支持的其余ECMAScript特性：

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编译的样例，你仅须要执行：

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或下面的评论中给咱们一个声音。

快乐的黑客！

资源

Babel+TypeScript以及其它工具的配置参考

TypeScript-Babel-Starter

react-webpack-typescript-babel

webpack-typescript-babel

TypeScript With Babel: A Beautiful Marriage

关注微信公众号，发现更多精彩内容