天天看点

VScode 自动编译TypeScript的配置

1. 首先安装 typescript

npm install -g typescript
           

2. 在当前目录打开命令行,生成tsconfig.json文件

tsc --init
           

3. 在当前目录打开命令行,生成 tsconfig.json 文件

打开tsconfig.json文件修改和删除相应配置(如果想快速修改配置,请复制下列配置),不配置也可以直接使用默认配置

{
  "compilerOptions": {
   "target": "es5", // 指定ECMAScript目标版本 这里选择es5
   "noImplicitAny": false, // 隐藏“any”类型在表达式和声明上引发错误,这里选择不隐藏
   "module": "es2015", // 选择模块化加载规范 这里选择es2015 就是es6加载规范
   "removeComments": false, // 不输出注释 这里选择 输出 
   "sourceMap": false, // 生成相应的'.map'文件 这里选择否
   "allowSyntheticDefaultImports": true // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出,仅为了类型检查。
  }
}
           

这样就会默认在当前.ts文件所属的文件夹下生成对应的.js文件

中文 tsconfig.json 配置信息查看 请点击这里——https://www.tslang.cn/docs/handbook/compiler-options.html

4. 打开自己的 .ts 文件 写自己的 ts 代码

export class Hello {
    
}
           

5. 点击 VScode 上方菜单栏的 终端——运行任务——tsc:监视-tsconfig.json

VScode 自动编译TypeScript的配置

出现下面的页面说明监视成功

VScode 自动编译TypeScript的配置

6. 此时在当前目录下就会自动生成文件hello.js了,然后我们在编辑ts文件的时候,就会自动监视.ts文件的改变进而生成对应的.js代码。

刚学 typescript 就卡在了 vscode 自动编译这里 然后就自己查了文档 对网上现有的文档进行总结和简化 希望能对大家有帮助 有错误也请大家给我留言 Thanks♪(・ω・)ノ