在之的文章里我们写好TS想要测试,每次都需要手动运行一下tsc ***.ts才可以,很明显这样太麻烦了。所以,现在就来解决这个问题。

开启watch模式

我们只需要在运行tsc命令时添加--watch参数(或者-w简写方式),即可开启watch模式:

tsc app.ts --watch

或者

tsc app.ts -w

然后,只要修改此文件,就会自动进行编译。

多个TS文件

当只有一个文件的时候,我们可以直接tsc ***.ts来进行编译,但是在实际项目中,是不可能只有一个文件的,那么多个文件怎么办呢?这个时候我们就需要将整个项目添加一个TS的配制,我们只需要在项目的目录下执行tsc --init即可创建TS的配制文件-tsconfig.json

这个时候不用像之前一样在后面加文件名,直接在命令行运行tsc就可以编译该项目下所有的.ts文件了。当然,之前说的watch模式也是使用的,执行tsc -w即可。

可以看到执行之后,每个.ts文件都生成了一个与之对应的.js文件。

指定、排除编译ts文件

假如上面的slides.ts是一个插件,我只是后期想在有其它文件当中引入它,并不想让它直接生成一个js文件,那么这个时候我们可以打开tsconfig.json文件,在后面加上一条exclude配制:

{
  "compilerOptions": {
    //这里是本来就有的一些配制
  },
  //在这里加上 exclude
  "exclude": [
    "slides.ts"
  ]
}

这样在编译的时候会忽略这个文件,其实在实际项目中,TS默认会给我们加上这样一条:

{
  "exclude": [
    "node_modules"
  ]
}

现在的项目都会使用npm包管理工具,node_modules里面可能有很多的.ts文件,这样就会忽略掉里面所有的.ts文件。
exclude就会有include,如果写了include,那么就只有在include里面的文件才会被编译:

{
  "include": [
    "main.ts"
  ]
}

编译的相关配制

编译相关的配制有很多,我们现在来介绍其中一些常用的。

target

当我们新建好tsconfig.json文件后,可以看到里面的compilerOptions项有很多的配制项。例如target:es5,指的就是最终TS会生成一个es5的js文件,这样我们既可以在开发的时候使用一此新特性,又可以兼容各个平台。

如果我们想改成ES的其它版本标准也是可以的:

module

模块规范,默认module用的是commonjs规范,它还有amd,system,umd,es2015,es2020等等选项。

lib

这个选项默认什么都没写,但它可以让你找到ts核心库的所有内容,例如我们在TS文件里选中页面上的元素,可能会这样写:let btn = document.querySelector('#btn');

注意,这里面的document对象和后面的querySelector方法在我们之前写的JS当中再正常不过了,因为这些东西在客户端的JS里是可以找到的。而TS是一个新的东西,它是把所有的东西都放到了自己的默认「库」当中,也就是lib当中,如果我们把配制文件中的lib一行的注释去掉,那么就是一个空数组,这个时候我们再次运行tsc,就会报错:

string,number,array…… 连基本的数据类型都找不到了,别说是DOM对象了~
我们可以看到这个lib的值有很多,例如DOM,ES5,ES6……:

sourceMap

由于浏览器只认识JS文件,所以我们想要直接调试TS的时候就有点麻烦了。但当我们把sourceMap:true打开后,TS在生成js文件的同时还会生成对应的.map文件,这个.map文件就是用来将JS和TS文件做一个关联,这样,我们可以直接在开发工具里进行TS的调试:

outDir和rootDir

默认生成的JS会和TS在同一目录下。这样会带来一个问题,就是项目文件结构会显的非常的乱,那么如何合理的组织TS和JS呢?没错,设置outDirrootDir选项。例如我们把TS文件放到ts目录下,而生成的JS文件放到js目录下:


{ "outDir": "./js", "rootDir": "./ts" }

这个时候再进行编译就会得到结果:

removeComments

假如我们在TS里写了一些注释,那么我们编译之后发现JS里也会有注释,这个其实不是我们要的,只需要把removeComments:true打开即可。

noEmitOnError

这个选项在默认生成的tsconfig.json里面是没写的,但是这个选项我觉得是比较重要的。因为我们之前的TS里即使写错了,虽然也会进行报错,但是TS编译器还是会进行编译生成JS。错了还给我生成……但我们如果加上了noEmitOnError:true(默认是false),这样在报错的时候就不会进行编译了。

以上只是介绍了一些常用的配制选项,更多配制可以到 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html进行查看。

下篇继续 \^_^/