TS+react开发笔记2：webstorm自动编译TypeScript配置

发布于 作者:

如果阅读本文前对TypeScript还没入门，建议先看这个5分钟入门文档：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

由于浏览器不能直接编译TS的代码，所以运行TS代码前首先要用TS编译器将其解释成js代码才能运行。显然，如果像上面那篇5分钟入门文档中那样，每次运行TS代码还得先命令行编译，太麻烦了，并且也不符合前端自动化的需要。已知使用webpack通过配置可以做到自动编译。不过在开发阶段我们更想在IDE层面做到一修改就立即编译，这样可以大大提高了开发效率。目前的IDE中 VScode和webstorm都支持这样的修改后自动编译功能。由于本人长期以来都是用的是webstorm，以下介绍如何使用webstorm自动编译TS文件。

基本环境

  • 我的webstorm 版本：2019.3.1
  • 操作系统版本：windows 10
  • nodejs版本：8.11.2

准备步骤

  1. 全局安装TypeScript编译器
npm install typescript -g

安装好，在命令行可以查看编译器的版本

tsc -v

2. 创建webstorm项目并设置TypeScript配置项

你有一个工程项目，并在工程根目录运行tsc --init，会自动产生tsconfig.json文件。不过默认的tsconfig.json文件废话太多了，我将其修改为：

{
  "compilerOptions": {
    "module": "commonjs", //编译后代码的模块化组织方式，还有amd，umd，es2015等选项。
    "target": "es5", //编译后代码的ES版本，还有es3，es2105等选项。
    "sourceMap": true //是否生成.map文件
  },
  "exclude": [
    "node_modules"
  ]
}

3. 设置webstorm setting

打开Webstorm,为TypeScript文件更改编译设置，File->Settings->File Watchers. File Watchers是一个当观察到目标类型文件出现变化时自动执行某种操作的触发器。默认的File Watchers下是没有观测任何类型文件的，我们需要把TS文件类型添加上去。

如下图所示，在File Watchers界面，先点击最右边红框所示的+号，然后选择custom，自定义个一个file watcher规则

自定义file watcher规则页面如下图所示，请把图中红框所标识的部分填好。

这样，typescript的自动编译功能就设置好了。然后将其启用，可以如下图红框处设置该file watcher规则对一个项目启用还是全局启用（我这里是全局启用）

测试一下，所有TS文件都可以立即编译，编译结果会被放在同目录下。如果编译出现错误，会立即在webstorm的控制台弹出提示。

如果你使用了webpack，编译ts文件后结果要存放在别的目录怎么办？

webstorm直接告诉我：

Module resolution rules from webpack.config.js are now used for coding assistance.

所有文件遵照webpack.config.js 的配置自动编译，不需要做额外的设置。webstorm就是这么智能！

赞美webstorm!