美文网首页Typescript
Typescript(十)compilerOptions 配置项

Typescript(十)compilerOptions 配置项

作者: camellias__ | 来源:发表于2021-05-31 09:02 被阅读0次

    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

    相关文章

      网友评论

        本文标题:Typescript(十)compilerOptions 配置项

        本文链接:https://www.haomeiwen.com/subject/zvmvsltx.html