三步 让你的 vscode 自动编译ts文件

三步让你的 vscode 自动编译ts文件

TypeScript环境安装与如何在vscode实现自动编译ts文件?

前提条件

安装 node 环境

环境安装

• tsc 作用：负责将ts 代码 转为 浏览器 和 nodejs 识别的 js代码。

// 全局安装
npm install -g typescript

// 检查是否安装成功
tsc -v

自动编译

设置 VSCode 自动编译，省去敲命令编译文件，由工具自动完成，提高效率。

• 运行 tsc --init，创建 tsconfig.json 文件；
• 修改 tsconfig.json 文件，设置编译后的 js 文件夹。快速查找 outDir，输出路径修改为："outDir": "./js/"；
• 设置 vscode 监视任务，之后修改项目中的 ts 代码时，会自动生成对应 js；
• （或运行 tsc -w 命令监听）

PS： 至此 三步让vscode自动编译 分享完成，也成功运行啦；下面再分享你可能会遇到的问题吧，有问题不要慌哈~

运行监视任务时报错？

• 嗯，不要着急~，是因为该目录下没有监视到 ts 文件，提示错误信息，先不用管。
• 接下来，直接创建一个 ts 测试文件，写上你喜欢的代码，会发现自动生成编译后的 js 文件，错误也没有啦！