⑦ TypeScript 类型保护、tsconfig.json文件

缺乏、安全感 2022-12-22 14:26 207阅读 0赞

### TypeScript ###

*  tsconfig.json文件
 *  类型保护
 *  TS中使用jQuery

--------------------

**写下博客主要用来分享知识内容，并便于自我复习和总结。  
如有错误之处，请各位大佬指出。**

--------------------

# tsconfig.json文件 #

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

除了上文中提到自己手动创建一个tsconfig.json外，我们还可以通过命令行来创建：  
![在这里插入图片描述][20201120150526738.png_pic_enter]  
创建好了之后，里面有很多配置信息，而且大部分都是注释掉的。具体内容就不展示了。接下来就介绍几个其中常用的内容。其它的内容只需要在用到的时候，去TS文档查就可以了。[tsconfig编译选项][tsconfig]

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

--------------------

1、编译成JS后，去除注释。  
![在这里插入图片描述][20201120151109664.png_pic_ceter]

--------------------

2、只编译文件夹中部分TS文件  
![在这里插入图片描述][20201120152724349.png_pic_cnter]  
或者  
![在这里插入图片描述][20201120153021985.png_pic_enter]  
它们的区别：include包含的文件可以使用exclude排除，被files包含的文件不会被exclude排除。除此以外，files可以指定一个包含相对或绝对文件路径的列表，而include和exclude属性可以指定一个文件匹配模式列表

--------------------

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

如果strict为true，那么这部分的所有TS规范都会开启。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]  
接下来只介绍几个作为了解，通常我们不去调整这部分规范，因为我们就是要严格按照TS规范书写。

（1）允许我们在使用any类型的时候，不去标明  
![在这里插入图片描述][20201120154441109.png_pic_ceter]  
比如：

function test(name){ 
        return name;
    }

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

（2）允许null值出现  
![在这里插入图片描述][20201120155035191.png_pic_cener]  
比如：

const age:number = null;

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

--------------------

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

`rootDir`：去某个路径下，寻找TS文件  
`outDir`：将编译好的JS文件放在指定路径下  
![在这里插入图片描述][20201120160241235.png_pic_enter]

--------------------

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

这个文件会存储一些位置信息，也就是 转换后的代码 和 转换前代码的位置信息。假如TS文件出错了，通过它我们就可以快速锁定错误位置。  
![在这里插入图片描述][20201120160323888.png_pic_enter]

--------------------

6、编译成JS文件时，将TS中没用到的内容提示出来。  
![在这里插入图片描述][20201120161144168.png_pic_cnter]  
比如：

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

如果noUnusedLocals为true，因为age没有export，也就是在这个TS文件外使用不上，此时就会报错。为false时，不报错。  
![在这里插入图片描述][20201120161429445.png_pic_ceter]

--------------------

# 类型保护 #

直接看例子：

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作为判断依据，但是编译可过不去。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]

--------------------

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

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`直接下载。  
![在这里插入图片描述][20201120184623296.png_pic_cnter]  
第二种是在html中导入jQuery，现在这种情况下，虽然在ts中使用$会报错，但是在页面中肯定能展示内容（因为TS会转化成JS）。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TypeScript测试</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
    
    </body>
    </html>

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

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

[20201120150526738.png_pic_enter]: /images/20221120/76c5acec88654d899052a32f5d491967.png
[tsconfig]: https://www.tslang.cn/docs/handbook/compiler-options.html
[20201120151109664.png_pic_ceter]: /images/20221120/8b6f27e0f079434cb48460171d3b036f.png
[20201120152724349.png_pic_cnter]: /images/20221120/9272d95425bc483892bfea5ac62446cd.png
[20201120153021985.png_pic_enter]: /images/20221120/eedcff05fcf9416388833cf722cc2235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]: /images/20221120/067fe46caade4e16aa6f344b7f772e50.png
[20201120154441109.png_pic_ceter]: https://img-blog.csdnimg.cn/20201120154441109.png#pic_ceter
[20201120155035191.png_pic_cener]: https://img-blog.csdnimg.cn/20201120155035191.png#pic_cener
[20201120160241235.png_pic_enter]: https://img-blog.csdnimg.cn/20201120160241235.png#pic_enter
[20201120160323888.png_pic_enter]: https://img-blog.csdnimg.cn/20201120160323888.png#pic_enter
[20201120161144168.png_pic_cnter]: https://img-blog.csdnimg.cn/20201120161144168.png#pic_cnter
[20201120161429445.png_pic_ceter]: https://img-blog.csdnimg.cn/20201120161429445.png#pic_ceter
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]: https://img-blog.csdnimg.cn/20201120163707508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70#pic_ceter
[20201120184623296.png_pic_cnter]: https://img-blog.csdnimg.cn/20201120184623296.png#pic_cnter