本文共 2882 字，大约阅读时间需要 9 分钟。

---

写下博客主要用来分享知识内容，并便于自我复习和总结。

如有错误之处，请各位大佬指出。

---

tsconfig.json文件

在用装饰器的时候，我们使用到了tsconfig.json文件来避免了报错。虽然这个配置文件中的内容不是很常用，但确实也很重要，如何将TS编译成JS全靠这个文件。

除了上文中提到自己手动创建一个tsconfig.json外，我们还可以通过命令行来创建：

创建好了之后，里面有很多配置信息，而且大部分都是注释掉的。具体内容就不展示了。接下来就介绍几个其中常用的内容。其它的内容只需要在用到的时候，去TS文档查就可以了。

（在这里补充一点：因为之前提到WebStorm和IDEA是有自动编译功能的，所以在本文件夹内创建了tsconfig.json后，相关配置信息就会生效。如果使用VSCode，之前没选择自动编译，那么之前编译的时候，是这么做的：tsc index.ts，现在为了能让配置信息生效，只需要：tsc 即可。而如果选择用：ts-node index.ts编译，它也可以让配置信息生效）

---

1、编译成JS后，去除注释。

---

2、只编译文件夹中部分TS文件

或者 它们的区别：include包含的文件可以使用exclude排除，被files包含的文件不会被exclude排除。除此以外，files可以指定一个包含相对或绝对文件路径的列表，而include和exclude属性可以指定一个文件匹配模式列表

---

3、编译和书写规范可以严格按照TS规范来书写。

如果strict为true，那么这部分的所有TS规范都会开启。

接下来只介绍几个作为了解，通常我们不去调整这部分规范，因为我们就是要严格按照TS规范书写。

（1）允许我们在使用any类型的时候，不去标明

比如：

function test(name){
       return name;}

此时，如果noImplicitAny为false就不会报错，如果为true，name就会因为没有标明any而报错。

（2）允许null值出现

比如：

const age:number = null;

此时，如果strictNullChecks为false就不会报错，如果为true，age会因为是null而报错。

---

4、将编译后的js文件放在某文件夹下

rootDir：去某个路径下，寻找TS文件

outDir：将编译好的JS文件放在指定路径下

---

5、在编译成JS文件时，还会生成一个.map的文件。

这个文件会存储一些位置信息，也就是 转换后的代码 和 转换前代码的位置信息。假如TS文件出错了，通过它我们就可以快速锁定错误位置。

---

6、编译成JS文件时，将TS中没用到的内容提示出来。

比如：

const age:string = null;export const name = '李四';

如果noUnusedLocals为true，因为age没有export，也就是在这个TS文件外使用不上，此时就会报错。为false时，不报错。

---

类型保护

直接看例子：

interface boy{
       sex: string;    play: ()=>{
   };}interface girl{
       sex: string;    sit: ()=>{
   };}function judge(person:boy|girl){
       if(person.sex == "男"){
       	// 报错：        person.play();    }else{
       	// 报错：        person.sit();    }}

在如上这种情况下，虽然已经设置可以传递一个可能是boy，可能是girl的对象，但是play这个函数girl里没有，所以我们不能这么用，即使我们确实能用sex作为判断依据，但是编译可过不去。

---

第一种类型保护：类型断言（比较常用）

interface boy{
       sex: string;    play: ()=>{
   };}interface girl{
       sex: string;    sit: ()=>{
   };}function judge(person:boy|girl){
       if(person.sex == "男"){
           (person as boy).play();    }else{
           (person as girl).sit();    }}

---

第二种类型保护：

interface boy{
       sex: string;    play: ()=>{
   };}interface girl{
       sex: string;    sit: ()=>{
   };}function judge(person:boy|girl){
       if('play' in person){
           person.play();    }else{
           person.sit();    }}

---

第三种类型保护：

function add(first:string|number, second:string|number){
       if(typeof first === 'string' || typeof second === 'string'){
           return `${
     first}${
     second}`;    }    return first + second;}

---

第四种类型保护：

class NumberObj{
       count:number;}function addObj(first:object|NumberObj, second:object|NumberObj){
       if(first instanceof NumberObj && second instanceof NumberObj){
           return first.count + second.count;    }    return 0;}

---

TS中使用jQuery

最后的最后，简单说一下在TS中使用jQuery。

一种办法是使用npm i @types/jquery直接下载。

第二种是在html中导入jQuery，现在这种情况下，虽然在ts中使用$会报错，但是在页面中肯定能展示内容（因为TS会转化成JS）。

此时，为了让其在TS中不报错，我们这么做就简单粗暴的完成了：

declare var $:any;$(function(){
       alert("jQuery")});

转载地址：http://nmyki.baihongyu.com/