(二)TypeScript前置编译配置

TS常用的一些前置配置知识

指定TS编译和生成目录

通过修改tsconfig.json配置项,可以调整TS编译后生成的JS位置,也可以指定TS代码编写的位置。手动创建一个dist目录用来存放编译后的JS文件,创建一个src目录,用来存放TS代码,如图:

使用模块化隔离变量

当TS进行语法检测,发现不同的文件存在相同名字的变量,会提示报错,

那么需要使用模块化进行全局变量隔离,通过 export{}

如果tsconfig.json如果模块配置的是common.js ,那么JS会编译成CJS规范写法;如果配置的是ES Module,那么JS会生成mjs规范写法。这些都是Node的知识,不做多说明

编译优化

一个很有趣的现象,TS代码如果有错误依然会编译成功,生成JS代码。num01是string类型,也就是字符串类型;必须写成let num01:string = '120'这种语法。

typescript 复制代码
let username: string = 'bobo'

let num01: string = 120

export {}

已经有错误提示了

但还是生成了JS文件

貌似JS代码还是可以走得通,因为JS弱类型的优势;但这不是我想要的,按理说错误提示不应该编译生成JS代码,通过修改tsconfig.json配置noEmitOnError:true,这样TS语法报错,就不再生成JS文件

Node环境配置TS编译后运行

JS代码可以直接在Node或者浏览器环境运行。目前TS生成JS,还需要在把JS拿到Node 或者 浏览器环境才能运行。这样比较麻烦,通过ts-node这个指令去编译TS文件,编译后就会输出结果

bash 复制代码
全局安装ts-node
npm i -g ts-node typescript

这里或许有疑问为什么是npm,而不是pnpm;其实npm和pnpm都是一样的,npm安装依赖,你用pnmp构建的项目也是可以识别 ts-node ./src/*,编译并运行ts代码,可以看到确实生效了

相关推荐
耀耀_很无聊1 分钟前
14_Spring Boot 跨域(CORS)处理指南
spring boot·后端
他日若遂凌云志11 分钟前
深入拆解 Windows Socket 五种 I/O 模型:核心机制、Linux 差异与场景适配
后端
小码编匠11 分钟前
开箱即用!集成 YOLO+OpenCV+OCR 的 WebAI 平台(支持RTSP/RTMP视频流识别与自训练)
spring boot·后端·opencv
小红13 分钟前
网络通信基石:从IP地址到子网划分的完整指南
前端·网络协议
一枚前端小能手18 分钟前
🔥 前端储存这点事 - 5个存储方案让你的数据管理更优雅
前端·javascript
willlzq21 分钟前
深入探索Swift的Subscript机制和最佳实践
前端
RockerLau25 分钟前
micro-zoe子应用路由路径污染问题
前端
代码代码快快显灵31 分钟前
Axios的基本知识点以及vue的开发工程(基于大事件)详细解释
前端·javascript·vue.js
文心快码BaiduComate32 分钟前
再获殊荣!文心快码荣膺2025年度优秀软件产品!
前端·后端·代码规范
Mintopia32 分钟前
🚀 Next.js 后端能力扩展:错误处理与 HTTP 状态码规范
前端·javascript·next.js