如何将 TypeScript 转换为 ES6?

Posted

技术标签:

【中文标题】如何将 TypeScript 转换为 ES6?【英文标题】:How do I transpile TypeScript to ES6? 【发布时间】:2015-08-07 00:35:40 【问题描述】:

基本上我需要能够在我的 IDE 中编写 TypeScript 代码(这为开发带来了极大的便利),将其编译为 ES6,然后应用 babel.js(因为所有浏览器都不支持大多数 ES6)以获得结果ES5 脚本。

这可能吗?我怎样才能做到这一点?

【问题讨论】:

为什么需要 ES6 作为输出?你想解决什么问题? TypeScript 1.5 具有 ES6 输出模式。然后,您可以通过 Babel 运行生成的 javascript 我希望能够使用现在可以部署的 Typescript 编写 ES6 应用程序,但是当 ES6 成为规则时,我将删除 babel 并获得相同的结果。 不确定这是什么项目,但在互联网上相当大比例的人使用最新浏览器之前,我需要几年时间。 我很好奇你为什么要将 TypeScript 编译成 ES6,只是为了将它转换成 ES5,而 TypeScript 可以直接编译成 ES5。相同的 TypeScript 代码库几乎可以同时转换为 ES5 和 6,因此,如果您现在将代码编译为 ES5,则以后可以将整个代码库重新编译为 ES6,而无需更改一行。 【参考方案1】:

是的。

您可以将 TypeScript 编译器定位到 ES6。

例如,将此添加到您的命令行参数中:

--target es6

【讨论】:

【参考方案2】:

是的,你可以。

添加--target es2015,或将target 添加到您的tsconfig.json


  "compilerOptions": 
    "target": "es2015"
  

支持的目标选项有:

“ES3”(默认) “ES5” “ES6”/“ES2015” “ES2016” “ES2017” “ESNext”

还有很多配置选项。你可以在这里探索它们: Compiler options

某些选项只允许在tsconfig.json 中使用,不能通过命令行开关。

【讨论】:

【参考方案3】:

您可以使用 typescript 编写纯 ES6,然后转译为 ES3 或 ES5。由于 typescript 是 ES6 加上好东西。

将其视为使用 Less 来编写你的 css,你可以在一个 less 文件中编写纯 CSS,它会编译得很好。

对于 typescript 1.8 语言规范:

TypeScript 是 JavaScript 的语法糖。 TypeScript 语法是 ECMAScript 2015 (ES2015) 语法的超集。每个 JavaScript 程序也是一个 TypeScript 程序。

TypeScript 语法包含 ECMAScript 2015 的所有功能,包括类和模块,并提供将这些功能转换为 ECMAScript 3 或 5 兼容代码的能力。

【讨论】:

【参考方案4】:

TypeScript 或多或少是 ES6,几乎没有语法糖。 我建议你编写 Vanilla ES6 而不是 TypeScript,但另一方面,TypeScript 工具值得付出额外的努力来编写 TypeScript 并将其转换为 ES6,然后让 Babel 完成剩下的工作。

这是一个更方便的选项,如评论中所述,从 TypeScript 1.5 开始,您可以转译为 ES6。

【讨论】:

该转译器中是否存在 ES6 的所有功能? 除了 typescript 有可选的类型,允许强类型化无类型 js 依赖的接口,还有更多的东西。它的核心是 ES6,但更多。 编写 Typescript 的主要好处之一不是它必须被编译吗?这将帮助您找到错误? 发现TypeScript不认为String.repeat()存在。

以上是关于如何将 TypeScript 转换为 ES6?的主要内容,如果未能解决你的问题,请参考以下文章

如何禁用:[js] 文件是 CommonJS 模块;它可以转换为 ES6 模块

使用 TypeScript ES6 模块和 RequireJS 注册 Angular 元素

How Javascript works (Javascript工作原理) (十五) 类和继承及 Babel 和 TypeScript 代码转换探秘

如何将 json 转换为 typescript 接口?

mongoose 和 typescript 如何自动将 '_id' 转换为 'id'?

如何将 React 路由器功能转换为 Typescript?