TypeScript - (二) 在WebStorm中创建和配置TypeScript项目

说明:

本人使用的是WebStorm2019.1，其他版本的请注意。

1. WebStorm创建一个普通项目。

   File -> New -> Project

点击Create之后直接打开(new window)

 

创建好了之后是一个空白的文件夹(包含.idea文件夹)

2. 在项目根目录下新建一个tsconfig.json文件。

具体配置可以直接使用下面的配置，详细配置可以去官网查考每一个属性对应的作用。

https://www.tslang.cn/docs/handbook/compiler-options.html

{
  "compilerOptions": {
    // 采用的模块系统
    "module": "es6",
    // 编译输出目标 ES 版本
    "target": "es6",
    // 删除所有注释，除了以 /!*开头的版权信息。
    "removeComments": true
  }
}

3.WebStorm配置TypeScript

1.File -> Settings

2.Language & Frameworks -> TypeScript 配置(ts语言规范配置)

标红的地方需要引入安装好的tsc.cmd文件，如果没有安装ts请浏览https://blog.csdn.net/qq_36255237/article/details/98051062

3.Tools -> File Watchers 配置(ts文件自动编译为js文件)

点击+号

 

TypeScript
--target "ES5"
$FileNameWithoutExtension$.js
$FileDir$

保存即可。

4.项目中新建src目录和 "HelloWorld" TypeScript文件

注意:  可以看到下面有一个.js文件，这就是刚才配置生效的结果。

当我们保存当前文件的时候，编辑器会自动帮我们生成js文件，其实就是帮我们在命令行上输入了编译的指令。

注意: WebStorm在编译好js文件之后可以直接右键选择刚才编译好的文件进行编译。