请问老师babel和tsc

Question

老师请问一下tsc和babel的差异，我个人觉得这两个都有将高版本js编译成为第版本的作用。

但是我尝试使用tsc代替babel时，碰到了一个问题。针对于箭头函数之类的api是可以正常编译成为低版本的，但是比如一些Promise内置模块，即使我在tsconfig.json中添加了"lib": ["dom", "ESNext", "ES2021.Promise"],还是无法编译Promise。

我应该如何做呢，如果我不想使用babel只想用ts去编译ts文件同时可以实现低版本的promise兼容性。我的"target": "es5",已经是es5了。

请问老师ts是没有办法做到吗，只能使用babel了吗

Answer 1

keviny79 2021-10-27 14:02:57

我以为你最终要运行在浏览器里，所以告诉你如何运行，如果你只考虑编译，那个很简单

1.新建一个ts文件，编写你的包含了Promise的代码

2. 检查你的 ts 版本，最好是typescript 4.4.3 的版本

2.  直接  tsconfig.json 设置   "target": "es5" + "lib": [      "DOM",      "esnext"]  后  ts  编译成 js  就可以支持 Promise,没有任何问题

 这样配置不会有任何编译错误呀， 这个编译环节 根本 不需要 babel 。

Answer 2

keviny79 2021-10-27 14:02:49

见截图

Answer 3

keviny79 2021-10-27 00:49:09

      1. 你说的” ts去编译ts文件同时可以实现低版本的promise兼容性。“ ，tsc  可以把 ts 编译为 js  ，不管ts中是否包含了Promise， 只要按照这个配置  "target": "es5",  "lib": [      "DOM",      "esnext"]  编译成功不会有任何错误。

【本课程第13章 13-2到13-5  有关于tsconfig.json常用配置的详解】 

     2.  但如果希望浏览器 能正确识别 import export ,Promise ，绝大部分浏览器来说  如果你不想用 babel ，也可以这样做，具体步骤如下：

  第一步：修改tsconfig.json   "module": "esnext"  【编译成es规范的js]

  第二步： script 中 增加  type="module"    【<script type="module" src="dist/babeltsc/index.js"></script>】

当然但最终也要交给 构建工具webpack 或 vite 

• 提问者 hy_wang #1

  老师我只想简单的将ts 代码编译成为es5 代码，并且支持低版本promise 等兼容性我应该如何做呢

• keviny79 回复 提问者 hy_wang #2

  见上方截图和描述