（二）TypeScript前置编译配置

码农之王2025-06-14 12:01

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文件

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代码，可以看到确实生效了