首页/文章/typescript

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

2024-05-13
1559 字约 6 分钟
...

啊!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

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。

pnpm rm -g typescript
pnpm rm  typescript

好家伙,卸载了5.3.3 ,咋还有一个typescript 4.9.5 ???
回想起来去年使用npm装过typescript,
而pnpm直接卸载自己安装的,干不掉npm安装的。

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这样的第三方库。

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

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
typescript2025-09-26
彻底讲透as const + keyof typeof
一、为什么要 “as const” 1、默认情况下,TS把字面量推断成”宽类型“ 于是你写 ‘foo’ | ‘bar’ 时, 一旦拼错成 ’fooo‘, TS不会拦你。 2、加上 as const ,TS会把它当成”不可变的精确字面量” 数组、对象同理: 二、keyof typeof: 把值世界映射到类型世界 typeof:能把运行时的值变成类型; keyof:能把对象类型变成联合类型 合起来就是:给我一个对象,我立刻推出它所有建的字面...
学习面试
typescript2025-02-26
TypeScript 中的 interface和 type 类型有什么区别?它们各自有什么用途?
在 TypeScript 中, 和 都可以用于定义类型,但它们有一些细微的差异和特定的应用场景。下面我们详细比较它们的 区别 、 相同点 以及 各自的用途 。 一、相同点 1. 描述对象的结构 : 和 都可以用来描述对象的结构。 2. 都支持可选属性和只读属性 : 3. 都可以扩展 (类似于继承)。不过扩展的方式不同(具体见下文)。 二、区别 | 特性 | interface | type | | | | | | 定义方式 | 使用 关...
学习面试面试官
typescript2024-08-07
TypeScript 中 `type` 和 `interface` 的区别
基本概念: 和 究竟是啥? 就是类型别名,用来给各种类型起个名字。可以是基本类型、对象类型、联合类型、交叉类型、元组等。 则专注于定义对象的结构和行为。它更像是面向对象编程中的蓝图,描述了对象应该拥有哪些属性和方法。 用途和功能:什么时候用 ,什么时候用 ? 的用途和功能 复杂类型组合 : 非常适合定义联合类型、交叉类型和元组。 灵活性高 :可以进行类型变换,比如条件类型和映射类型。 的用途和功能 描述对象结构 : 用来定义对象的形状,...
学习
typescript2024-04-28
TS系列篇|类(class)
"不畏惧,不将就,未来的日子好好努力"——大家好!我是小芝麻😄 类(Class)定义了一件事物的抽象特点,包含它的属性和方法 1、定义类 在 中,我们也是通过 关键字来定义一个类, 使用 定义构造函数。 构造函数: constructor 主要用于初始化类的成员变量属性 类的对象创建时自动调用执行 没有返回值 2、类的继承 使用 关键字实现继承,子类中使用 关键字来调用父类的构造函数和方法。 子类继承父类后子类的实例就拥有了父类中的属...
学习
http-网络2026-10-15
OAuth 2.0是什么,以及如何正确接入
一、先从一个需求理解 OAuth 2.0 假设你开发了一个相册整理工具,用户希望它读取某个云盘里的照片。 把云盘密码交给工具,会带来几个问题:工具拿到的权限太大,密码可能泄漏,用户也难以只撤销这个工具的访问。 OAuth 2.0 提供一套 委托授权机制 :用户在云盘自己的页面确认授权,工具取得一个有权限范围和有效期的访问令牌,再用它调用云盘 API。用户的云盘密码不交给工具。 可以把它理解为:给工具一张“限定用途的通行证”。但令牌泄漏同...
学习
前端2026-10-15
前端动画全景指南
一、前端动画到底是什么 前端动画,就是让画面随时间、用户输入或页面状态连续变化。变化的对象可以是按钮的位置、弹窗的透明度、SVG 的线条、Canvas 里的粒子,也可以是三维场景中的镜头。 先把三个问题分开: | 问题 | 常见答案 | | | | | 画什么? | DOM/CSS、SVG、Canvas 2D、GPU 渲染的场景、预制动画素材 | | 怎样变化? | CSS 过渡/关键帧、Web Animations API、逐帧计算、...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录