TypeScript系列 0.开发环境配置

合集 - TypeScript教程(4)

1.TypeScript系列 0.开发环境配置2022-08-14

2.TypeScript系列 1.基本类型2023-07-063.TypeScript系列 3.接口和对象类型2023-07-094.TypeScript系列 4.数组类型2023-07-12

收起

本系列知识部分基于小满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验证一下

1. 在./src下新建两个ts文件：
   

2. 命令行执行tsc

3. tsc编译生成了js文件：
   

调试#

sourceMap#

1. 打开tsconfig.json，找到sourceMap选项，设置为true打开

2. 回到命令行执行tsc编译ts代码
3. 可以看到生成了js代码的同时，还生成了map映射文件：
   

launch.json#

1. 打开要运行的index.ts，这样创建launch.json时，会自动设置为index.ts的路径，免得手动输入

2. 打开调试面板，创建一个launch.json:
   

3. 选择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代码了。

1. 打断点

2. 按F5调试