WebStorm开发TypeScript的相关设置

最近公司采用typescript来编写组件，一开始都是手动tsc来将ts文件编译成js文件。用了一天后，都要疯了，还是直接设置webstorm来自动生成js吧。

第一步：安装node就不介绍了

第二步：当然就是安装typescript了

npm install typescript -g

安装完了，执行tsc -v看下版本

第三步：配置tsconfig.json文件
我的文件内容大概如下：

{
  "compilerOptions": {
    "target": "es5",//编译结果
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "removeComments": true,
    "alwaysStrict":false,//是否需要严格模式
    "importHelpers": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitThis": false,//当this表达式的值为any类型的时候，生成一个错误。
    "sourceMap": false,
    "baseUrl": ".",
    "types": [

    ],
    "outDir": "src/js",
    "paths": {
      "@/*": [
        "src/ts/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/ts/**/*",
    "typings/globals/jquery/index.d.ts"
  ],
  "watch": false,
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

第四步：打开Webstorm,为TypeScript文件更改编译设置，File->Settings->File Watchers->TypeScript，这里我们需要选择TypeScript，如果第一次进来，应该是选择不到的，则选择custorm创建一个。

第五步：配置Watchers

//tsc安装目录
Program：C:\Users\Administrator\AppData\Roaming\npm\tsc
//编译的目标类型
Arguments：–sourcemap --target “ES5”

Output paths to refresh：$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

Working directory：$FileDir$

第六步：设置typescript自动编译，勾选下图圈红线的位置。

到此为止就配置完了，在编辑器里面编写ts就会生成相应的js文件。