Typescript（十）compilerOptions 配置项
<h3 id="1removecomments-属性">1：removeComments 属性</h3><p>removeComments是complerOptions里的一个子属性，它的用处是告诉TypeScript对编译出来的js文件是否显示注释（注解）。比如我们现在把removeComments的值设置为true，就是在js中不显示注释。</p>
<p>我们把上节课文件没有的Demo2.ts和生成的 JS 文件都删除掉，只留Demo.ts文件，然后再Demo.ts文件里，加入一个注释。</p>
<pre><code class="language-typescript">// I‘m xh
const person: string = "xh";
</code></pre>
<p>写完注释后，直接再终端Terminal里，输入tsc,输入完成后，很快就会生成一个demo.js文件，打开后会看到下面的代码。</p>
<pre><code class="language-typescript">"use strict";
var person = "xh";
</code></pre>
<p>你写的注释并没有编译到demo.js里。如果我们反之，把removeComments的值，设置为false,这时候demo.js里就会有注释内容了。</p>
<pre><code class="language-typescript">"use strict";
// I‘m xh
var person = "xh";
</code></pre>
<h3 id="2strict-属性">2：strict 属性</h3>
<p>strict属性如果设置为true,就代表我们的编译和书写规范，要按照TypeScript最严格的规范来写，如果我们把这个设置为false或者注释掉，意思是我们可以对设置一些不严格的写法。</p>
<h3 id="3noimplicitany-属性">3：noImplicitAny 属性:</h3>
<p>noImplicitAny属性的作用是，允许你的注解类型 any 不用特意表明，只听概念很难理解。这就是看我视频的一个好处，如果你只看官方 API，你可能要迷糊一阵啥叫允许你的注解类型any不用特意表明,这就是每个汉字我都认识，连在一期就不知道啥意思的最好诠释。</p>
<p>为了更好的说明，我们举个例子,在demo.ts里，删除刚才的代码，然后写一个方法，方法的参数我们设置成任意类型(any)。</p>
<pre><code class="language-typescript">function xh(name) {
return name;
}
</code></pre>
<p>这时候我们的TypeScript是进行报错的，我们用tsc编译也是报错的。这就是因为我们开启了strict:true,我们先注释掉，然后把noImplicitAny的值设置为false,就不再报错了。</p>
<p>如果设置为noImplicitAny:true,意思就是值就算是 any（任意值），你也要进行类型注释。</p>
<pre><code class="language-typescript">function xh(name: any) {
return name;
}
</code></pre>
<p>你可以简单的理解为，设置为 true，就是必须明确置顶 any 类型的值。</p>
<h3 id="3strictnullchecks-属性">3：strictNullChecks 属性</h3>
<p>我们先把strictNullChecks设置为false,它的意思就是，不强制检查 NULL 类型。我们举个例子，让你能一下子就明白，还是删除demo.ts里的代码，然后编写代码.</p>
<pre><code class="language-typescript">const xh: string = null;
</code></pre>
<p>代码写完后，你会发现这段代码是不报错的，如果是以前，一定是报错的，这就是我们配置了“不强制检验 null 类型”。如果你设成strictNullChecks:true，这时候就报错了。</p>
<h3 id="4ts-node-遵循-tsconfigjs-文件">4：ts-node 遵循 tsconfig.js 文件</h3>
<p>tsc fileName 是没办法遵循tsconfig.js文件的</p>
<p>ts-node是遵循tsconfig.js文件的</p>
<h3 id="5rootdir-和-outdir">5：rootDir 和 outDir</h3>
<p>现在你的js文件直接编译到了根目录下，和ts文件混在了一起。我们当然是不喜欢这种方法的，工作中我们希望打包的js都生成在特定的一个文件夹里,比如build。</p>
<p>这时候你就可以通过配置outDir来配置，当然你也可以通过rootDir来指定ts文件的位置，比如我们把所有的 ts 文件都放到 src 下。那配置文件就应该这样写。</p>
<pre><code class="language-typescript">{
"outDir": "./build" ,
"rootDir": "./src" ,
}
</code></pre>
<p>这时候你再在Terminal中输入tsc,就会有不同的效果了。</p>
<h3 id="6编译-es6-语法到-es5-语法-allowjs">6：编译 ES6 语法到 ES5 语法-allowJs</h3>
<p>现在你在src目录下用ES6的语法写了一个demo2.js文件，代码如下。</p>
<pre><code class="language-typescript">export const name = "xh";
</code></pre>
<p>如果你不做任何配置，这时候试用tsc是没有效果的。你需要到tsconfig.js文件里进行修改，修改的地方有两个。</p>
<pre><code class="language-typescript">"target":'es5' ,// 这一项默认是开启的，你必须要保证它的开启，才能转换成功
"allowJs":true, // 这个配置项的意思是联通
</code></pre>
<p>这两项都开启后，在使用tsc编译时，就会编译js文件了。</p>
<h3 id="7sourcemap-属性">7：sourceMap 属性</h3>
<p>如果把sourceMap的注释去掉，在打包的过程中就会给我们生成sourceMap文件.</p>
<p>sourceMap 简单说，Source map 就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。</p>
<p>这里我不对 Source map 文件详细讲解，如果你感兴趣，可以自行百度一下吧。</p>
<h3 id="8nounusedlocals-和-nounusedparameters">8：noUnusedLocals 和 noUnusedParameters</h3>
<p>比如现在我们修改demo.ts文件的代码，改为下面的样子。</p>
<pre><code class="language-typescript">const xh: string = null;
export const name = "xh";
</code></pre>
<p>这时候你会发现xh这个变量没有任何地方使用，但是我们编译的话，它依然会被编译出来，这就是一种资源的浪费。</p>
<pre><code class="language-typescript">//编译后的文件
"use strict";
exports.__esModule = true;
exports.name = void 0;
var jspang = null;
exports.name = "jspang";
</code></pre>
<p>这时候我们可以开启noUnusedLocals：true，开启后我们的程序会直接给我们提示不能这样编写代码，有没有使用的变量。</p>
<p>noUnusedParameters是针对于名优使用的函数的，方法和noUnusedLocals：true一样，自己尝试一下。</p>
<p>我们讲了几个最常用的方法，如果你需要全面的了解，可以查看这个网址：</p>
<p>https://www.tslang.cn/docs/handbook/compiler-options.html (编译选项详解)</p>
<p>有好的建议，请在下方输入你的评论。</p>
<p>欢迎访问个人博客<br>
https://guanchao.site</p>
<p>欢迎访问小程序：</p>
<p><img src="https://img-blog.csdnimg.cn/20210209085646184.png#pic_center"></p><br><br>
来源：https://www.cnblogs.com/camellias/p/15061110.html
頁:
[1]