TypeScript系列 0.开发环境配置
本系列知识部分基于小满ZS的TypeScript系列教程。我也会补充一些视频没有的内容。
需要node环境，安装node环境可以参考我的另一篇博客的1~3节：一次性解决nvm+nodejs+nrm+vite开发环境搭建问题
1.安装
安装好Node环境，在命令行执行如下命令全局安装TypeScript：
npm install -g typescript
安装完成后执行如下命令查看安装好的TypeScript版本：
tsc -v
2.使用
新建工程
使用命令npm init建立一个node项目。再使用命令tsc -init或tsc --init（两个都行）创建tsconfig.json配置文件。
手动编译、执行
假设sample.ts是一个写好的ts文件，内容如下：
// sample.ts
let str:string="111"
console.log(str);
我们可以执行编译命令，把它编译成js文件：
tsc sample.ts
tsc命令不带文件名时，会编译rootDir下的所有ts文件
ts文件编译好后，为同名的js文件，使用以下命令，执行js代码
node sample.js
自动编译、执行
手动编译的缺点是比较繁琐，每次编写完都需要手动编译一下再执行。我们可以使用如下命令， sample.ts每次修改后都会被自动编译：
tsc --w sample.ts
再开一个命令行窗口，每次执行sample.js就可以了：
node sample.js
3.直接执行TypeScript代码
自动执行还是比较繁琐，能不能直接执行ts文件呢？答案是可以。
安装两个包，实现在Node环境直接执行TS：
npm install @types/node --save-dev
npm install ts-node -g
然后就可以直接执行ts
ts-node sample.ts
4.配置tsconfig.json
在第二步中，已经使用tsc --init为ts编译器创建了一个配置文件tsconfig.json：
控制台：
根目录：
配置文件内容：
内容虽然很多，但是刚开始只会用到很少的一部分，接下来会详细介绍。
target
target指示由ts编译的js的版本，默认是es2016，它是一个旧版本，已经得到了主流浏览器良好的支持。可以根据自己的需求选择特定的版本。
按ctrl+空格快捷键可以显示所有可选的target：
如果快捷键按不出来可选target，排查一下快捷键是否被占用了，windows中此快捷键通常被输入法切换中英文的功能占用
module
指示使用什么模块系统，"commonjs" 是nodejs的模块系统
不同模块系统的模块生成的js代码不同，具体可参考官方文档：https://www.typescriptlang.org/tsconfig#module
我个人使用的是"ESNext"，目前还没有遇到问题，如果后续遇到了，我会回来修改文章。
rootDir
指示源代码的根目录，默认是./代表根目录，通常我们会在根目录下面新建一个 src 目录存放源代码
ourDir
指示生成的js代码存放的位置 默认是./，代表根目录，通常会设置为./dist （tsc编译时，会自动创建此文件夹）
removeComments
此选项开启后，ts中的注释不会包含在js中
noEmitOnError
默认情况下，编译ts代码时，即使代码中有错误，编译器依然会生成js代码。最好的选择是一直打开这个选项，ts中有错误时，不生成js代码
小结
做完基础的配置，可以使用tsc验证一下
-
在
./src下新建两个ts文件：
-
命令行执行
tsc -
tsc编译生成了js文件：
调试
sourceMap
- 打开tsconfig.json，找到sourceMap选项，设置为true打开
- 回到命令行执行
tsc编译ts代码 - 可以看到生成了js代码的同时，还生成了map映射文件：
launch.json
-
打开要运行的index.ts，这样创建launch.json时，会自动设置为index.ts的路径，免得手动输入
-
打开调试面板，创建一个launch.json:
-
选择Node.js
这样创建了一个launch.json文件，它在configurations中包含一些配置项。在其中增加一条配置：
"preLaunchTask": "tsc: 构建 - tsconfig.json",
如果你的vscode是中文，这条参数就写
构建；如果是英文，就写build
我的配置如下，供参考：
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\src\\index.ts",
"preLaunchTask": "tsc: 构建 - tsconfig.json",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
断点调试
上面两个设置完成后，就可以打断点调试ts代码了。
- 打断点
- 按F5调试
