vscode配置Typescript自动编译环境

vscode下配置Typescript编译环境

步骤

1. 首先需要安装Nodejs node -v
2. 安装typescript模块 npm install -g typescript
3. 可查看typescript模块版本号 tsc -v
4. 在window + r —> 输入cmd进入该项目目录, 或 项目中Ctrl + ~, 创建tsconfig.json tsc --init
5. 在项目目录下会生成一个tsconfig.json文件
6. 默认: 大部分是注释的, 可以根据各自的需要来定制, tsconfig.json详解

tsconfig.json配置

"compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowJs": true
    "sourceMap": true,
    "outDir": "./js/",   /* Redirect output structure to the directory. */
    "rootDir": "./tscript/", 
    "removeComments": false,  //删除注释
    "noImplicitAny": false,
    ...更多配置项
  },
      
  // 可以修改target为es6 
  // 要调试把 sourceMap改为true
  // 添加allowjs为true,就可以ts和js混合用了

vscode 自动编译Typescript

1. 快速打开终端 Ctrl + ~
2. 输入: cmd .
3. tsc -w

测试

1. 例: 新建tscript，用作存放typescript文件**【tsconfig.json中配置输出文件夹】**。
2. tscript —>建 .ts后缀测试文件 var test:number = 4;
3. Ctrl + s 保存, 自动编译 Typescript文件
4. 点击拆分编辑器, 右边可时时预览编译后的**.js文件**