Typescript（十）compilerOptions 配置项

1：removeComments 属性

removeComments是complerOptions里的一个子属性，它的用处是告诉TypeScript对编译出来的js文件是否显示注释（注解）。比如我们现在把removeComments的值设置为true，就是在js中不显示注释。

我们把上节课文件没有的Demo2.ts和生成的 JS 文件都删除掉，只留Demo.ts文件，然后再Demo.ts文件里，加入一个注释。

// I‘m xh
const person: string = "xh";

写完注释后，直接再终端Terminal里，输入tsc,输入完成后，很快就会生成一个demo.js文件，打开后会看到下面的代码。

"use strict";
var person = "xh";

你写的注释并没有编译到demo.js里。如果我们反之，把removeComments的值，设置为false,这时候demo.js里就会有注释内容了。

"use strict";
// I‘m xh
var person = "xh";

2：strict 属性

strict属性如果设置为true,就代表我们的编译和书写规范，要按照TypeScript最严格的规范来写，如果我们把这个设置为false或者注释掉，意思是我们可以对设置一些不严格的写法。

3：noImplicitAny 属性:

noImplicitAny属性的作用是，允许你的注解类型 any 不用特意表明，只听概念很难理解。这就是看我视频的一个好处，如果你只看官方 API，你可能要迷糊一阵啥叫允许你的注解类型any不用特意表明,这就是每个汉字我都认识，连在一期就不知道啥意思的最好诠释。

为了更好的说明，我们举个例子,在demo.ts里，删除刚才的代码，然后写一个方法，方法的参数我们设置成任意类型(any)。

function xh(name) {
  return name;
}

这时候我们的TypeScript是进行报错的，我们用tsc编译也是报错的。这就是因为我们开启了strict:true,我们先注释掉，然后把noImplicitAny的值设置为false,就不再报错了。

如果设置为noImplicitAny:true,意思就是值就算是 any（任意值），你也要进行类型注释。

function xh(name: any) {
  return name;
}

你可以简单的理解为，设置为 true，就是必须明确置顶 any 类型的值。

3：strictNullChecks 属性

我们先把strictNullChecks设置为false,它的意思就是，不强制检查 NULL 类型。我们举个例子，让你能一下子就明白，还是删除demo.ts里的代码，然后编写代码.

const xh: string = null;

代码写完后，你会发现这段代码是不报错的，如果是以前，一定是报错的，这就是我们配置了“不强制检验 null 类型”。如果你设成strictNullChecks:true，这时候就报错了。

4：ts-node 遵循 tsconfig.js 文件

tsc fileName 是没办法遵循tsconfig.js文件的

ts-node是遵循tsconfig.js文件的

5：rootDir 和 outDir

现在你的js文件直接编译到了根目录下，和ts文件混在了一起。我们当然是不喜欢这种方法的，工作中我们希望打包的js都生成在特定的一个文件夹里,比如build。

这时候你就可以通过配置outDir来配置，当然你也可以通过rootDir来指定ts文件的位置，比如我们把所有的 ts 文件都放到 src 下。那配置文件就应该这样写。

{
    "outDir": "./build" ,
    "rootDir": "./src" ,
}

这时候你再在Terminal中输入tsc,就会有不同的效果了。

6：编译 ES6 语法到 ES5 语法-allowJs

现在你在src目录下用ES6的语法写了一个demo2.js文件，代码如下。

export const name = "xh";

如果你不做任何配置，这时候试用tsc是没有效果的。你需要到tsconfig.js文件里进行修改，修改的地方有两个。

"target":'es5' ,  // 这一项默认是开启的，你必须要保证它的开启，才能转换成功
"allowJs":true,   // 这个配置项的意思是联通

这两项都开启后，在使用tsc编译时，就会编译js文件了。

7：sourceMap 属性

如果把sourceMap的注释去掉，在打包的过程中就会给我们生成sourceMap文件.

sourceMap 简单说，Source map 就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

这里我不对 Source map 文件详细讲解，如果你感兴趣，可以自行百度一下吧。

8：noUnusedLocals 和 noUnusedParameters

比如现在我们修改demo.ts文件的代码，改为下面的样子。

const xh: string = null;
export const name = "xh";

这时候你会发现xh这个变量没有任何地方使用，但是我们编译的话，它依然会被编译出来，这就是一种资源的浪费。

//编译后的文件
"use strict";
exports.__esModule = true;
exports.name = void 0;
var jspang = null;
exports.name = "jspang";

这时候我们可以开启noUnusedLocals：true，开启后我们的程序会直接给我们提示不能这样编写代码，有没有使用的变量。

noUnusedParameters是针对于名优使用的函数的，方法和noUnusedLocals：true一样，自己尝试一下。

我们讲了几个最常用的方法，如果你需要全面的了解，可以查看这个网址：

https://www.tslang.cn/docs/handbook/compiler-options.html (编译选项详解)

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序：