TypeScript配置文件tsconfig.json详解

生成tsconfig.json

这个文件是通过tsc --init命令生成的，在桌面上新建一个文件夹TsDemo,然后打开VSCode，把文件托到编辑器中，然后打开终端Terminal,输入tsc --init。

输入完成后，就会出现tsconfig.json文件，你可以打开简单的看一下，不过此时你可能看不懂。

其实它就是用来配置如何对ts文件进行编译的，我们都叫它 typescript 的编译配置文件。

如果此时你的tsc执行不了，很有可能是你没有全局安装 TypeScript,可以全局安装一下。

让tsconfig.json 文件生效

你现在可以在文件夹跟目录建立一个demo.ts文件，然后编写一些最简单的代码，代码如下:

const person:string = 'Riven';

这时候我们不在使用ts-node直接执行了，需要用tsc demo.ts进行编译，编译后会得到demo.js文件。

生成的代码如下:

var person = 'Riven';

这时候好像一切都是正常的，但是我要告诉你的真相是tsconfig.json这个编译配置文件并没有生效。

此时我们打开tsconfig.json文件，找到complilerOptions属性下的removeComments:true选项，把注释去掉。

这个配置项的意思是，编译时不显示注释，也就是编译出来的js文件不显示注释内容。

现在你在文件中加入一些注释，比如：

// I love Riven
const person:string = 'Riven';

这时候再运行编译代码tsc demo.ts，编译后打开demo.js文件，你会发现注释依然存在，说明tsconfig.json文件没有起作用。

如果要想编译配置文件起作用，我们可以直接运行tsc命令，这时候tsconfig.json才起作用，可以看到生成的js文件已经不带注释了。

include，exclude，和files

那现在又出现问题了，如果我们的跟目录下有多个ts文件，我们却只想编译其中的一个文件时，如何作？

我们在项目根目录，新建一个文件demo2.ts文件，然后也写一段最简单的 ts 代码。

const person2:string = '翠花';

如果这时候我们在终端里运行tsc,虽然tsconfig.json生效了，但是两个文件都被我们编译了。

这不是你想要的结果，我们可以用三种办法解决这个问题。

第一种：使用 include 配置

include属性是用来指定要编译的文件的，比如现在我们只编译demo.ts文件，而不编译demo2.ts文件，就可以这样写。

写配置文件时有个坑需要注意，就是配置文件不支持单引号，所以里边都要使用双引号。

{
  "include":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这时候再编译，就只编译demo.ts文件了。

第二种：使用 exclude 配置

include是包含的意思，exclude是不包含，除什么文件之外，意思是写再这个属性之外的而文件才进行编译。

比如你还是要编译demo.ts文件，这时候的写法就应该是这样了。

{
   "exclude":["demo2.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这样写依然只有demo.ts被编译成了js文件。

第三种：使用 files 配置

files的配置效果和include几乎一样，我是没找出有什么不同，只要配置到里边的文件都可以编译。

{
  "files":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

结果是依然只有demo.ts文件被编译。

下来我们学习下compilerOptions配置项，它是告诉TypeScript具体如何编译成js文件的，里边的配置项非常多，这节我们先来讲几个简单的配置项，目的是让你熟悉compilerOptions的使用方法。

removeComments 属性

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

strict 属性

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

noImplicitAny属性

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

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

function riven(name) {
    return name;
  }

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

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

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

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

strictNullChecks属性

我们先把strictNullChecks设置为false,它的意思就是，不强制检查 NULL 类型。

我们举个例子，让你能一下子就明白，还是删除demo.ts里的代码，然后编写代码.

const riven: string = null;

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

如果你设成strictNullChecks:true，这时候就报错了。

ts-node遵循tsconfig.js

有的小伙伴问我了，tsc fileName 是没办法遵循tsconfig.js文件的，那ts-node是否遵循?

这里直接告诉你答案，ts-node是遵循的，感兴趣的可以自行试一下。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论