破案了,为啥TypeScript5.3编译let、const一直是var

啊!2024才学TypeScript还有价值吗?!学的话,就用最新的上。

1.环境

  • pnpm -v 8.15.4
  • tsc -v Version 5.3.3
  • node -v v20.10.0

2.背景&测试

使用pnpm安装了最新的TypeScript5.3.3,开始学习ts类型。 发现不论是let、const使用tsc编译完都是var。强迫症表示ES2016起不能接受var,尝试各种配置tsconfig.json后无效。

为什么let 经过tsc编译后 let=>var

简化此图投图问路群友。

我的测试:使用单条语句竟可以得到我期待的结果 let =>let

shell 复制代码
tsc --target es6 --module commonjs 2.ts

甲: 这个有可能是let 现在所声明属于全局作用域自动转成了var 也就是说用var 语义化更清晰!

我: 啊??ES6的增加的let、const不是更加严谨,TS也不会故意降级处理吧,我想要TS给我let=>let,const=>const的结果

乙: 这个看起来是没用当前目录的 tsconfig,如果你的 TypeScript 装在当前目录的话应该是用 npx tsc 而不是 tsc,你能命令行直接使用 tsc 说明是全局装了 TypeScript,可能因此用的是全局的 tsconfig。

我: 大佬啊,说得八九不离十了,很可能是tsconfig配置没生效的问题,或tsc调用的版本不对,马上测试。但是没有npx!这样调用不合理。我决定还是先搞懂tsc命令吧

群友 丙: 要用es2017。( 指"target": "es2017" )

群友 丁: 你配置下成最新的浏览器兼容版本。( 指"target": "ESNext" )

我: 两位群友都在说tsconfig配置不对,ES6===ES2015配置的"target": "es2016" 理应支持let、const,可能是tsconfig格式不对?参数不对?

感谢群友的交流。我进行两个方向的尝试:

1.故意加入干扰字符,确定当前tsconfig配置瞎写也不报错,进一步证明程序并未读取tsconfig.json。

2.查找tsc是否可能存在两个不同版本的TypeScript,有一个在全局运行,怀疑调用tsc是其中一个版本。

决定重装TypeScript,使用pnpm 卸载 typescript。

shell 复制代码
pnpm rm -g typescript
pnpm rm  typescript

好家伙,卸载了5.3.3 ,咋还有一个typescript 4.9.5 ???

回想起来去年使用npm装过typescript,

而pnpm直接卸载自己安装的,干不掉npm安装的。

shell 复制代码
npm rm -g typescript
npm rm  typescript

测试4.9.5或卸载重装typescript5.3,结果然而运行结果仍 let => var。

找了一圈没有发现全局配置 tsconfig.json文件的存在,判断不是tsc版本差异。

综上得出结论,tsc 文件.ts编译时无视tsconfig.json。

在指定 tsc --target es6 --module commonjs 文件.ts时读取配置参数有效。

那就看看tsc命令吧,想起来很多命令都可以-help打印课执行项,于是tsc -h :

3.好家伙!破案了!

命令 tsc 文件名.ts

无视 tsconfig.json 文件,使用默认编译选项 编译 指定文件。
命令 tsc

编译当前项目(使用当前工作目录的 tsconfig.json 进行配置 )。

使用当前工作目录的 tsconfig.json 进行配置,我们应该用tsc命令,不要带任何参数

4.发现误区

问题1:Node.js能直接运行 .ts文件了,不信你看。
回答:我差点以为发现了新大陆,我也很希望node 文件.ts可以直接诶运行,毕竟我的Node.js和TS都很新。

很遗憾!这个ts文件 === js文件,不存在TS需要编译的部分!!!

这里node 运行的ts代码和编译后的js一模一样!!!只不过名字从 info.js=>info.ts,这还是JS!!

换个简单的例子,接受现实吧。还得使用ts-node这样的第三方库。

人生三大错觉:电话响了、我能反杀、她还爱我。

相关推荐
亿元程序员1 天前
小伙伴说我的拼图游戏用Mask不能合批...
前端
恋猫de小郭1 天前
AI 正在造就你的「认知卸载」,但是时代如此
前端·人工智能·ai编程
摸鱼的春哥1 天前
Agent教程14:记忆才是Agent开发的核心
前端·javascript·后端
明月_清风1 天前
Clipboard API 深度实战:如何同时存入“纯文本”和“富文本”两种格式?
前端·javascript
明月_清风1 天前
权限陷阱:为什么你的“点击复制”在某些浏览器或 iframe 里会失效?
前端·javascript
掘金安东尼1 天前
让 JavaScript 更容易「善后」的新能力
前端·javascript·面试
掘金安东尼1 天前
用 HTMX 为 React Data Grid 加速实时更新
前端·javascript·面试
灵感__idea1 天前
Hello 算法:众里寻她千“百度”
前端·javascript·算法
yinuo2 天前
轻松接入大语言模型API -04
前端
袋鼠云数栈UED团队2 天前
基于 Lexical 实现变量输入编辑器
前端·javascript·架构