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一样,自己尝试一下。