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

最新推荐文章于 2024-05-31 14:35:26 发布

只爭朝夕不負韶華

最新推荐文章于 2024-05-31 14:35:26 发布

阅读量489

点赞数

分类专栏： # TypeScript 文章标签： typescript

本文链接：https://blog.csdn.net/qq_45613931/article/details/109854485

版权

TypeScript 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

TypeScript

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

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

tsconfig.json文件

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

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

（在这里补充一点：因为之前提到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）。

<!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")
});

只爭朝夕不負韶華

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
⑦ TypeScript 类型保护、tsconfig.json文件

TypeScripttsconfig.json文件类型保护TS中使用jQuery写下博客主要用来分享知识内容，并便于自我复习和总结。如有错误之处，请各位大佬指出。tsconfig.json文件在用装饰器的时候，我们使用到了tsconfig.json文件来避免了报错。虽然这个配置文件中的内容不是很常用，但确实也很重要，如何将TS编译成JS全靠这个文件。除了上文中提到自己手动创建一个tsconfig.json外，我们还可以通过命令行来创建：创建好了之后，里面有很多配置信息，而且大部分都是注释掉
复制链接

扫一扫