07_Typescript泛型的使用及declare声明类型

Typescript泛型的使用以及命名空间和declare声明类型

认识泛型

软件工程的主要目的是构建不仅仅明确和一致的API,还要让你的代码具有很强的可重用性:

  • 比如我们可以通过函数来封装一些API,通过传入不同的函数参数,让函数帮助我们完成不同的操作;
  • 但是对于参数的类型是否也可以参数化呢?

什么是类型的参数化?

我们来提一个需求:封装一个函数,传入一个参数,并且返回这个参数;

在这里插入图片描述

如果我们是TypeScript的思维方式,要考虑这个参数和返回值的类型需要一致:

上面的代码虽然实现了,但是不适用于其他类型,比如string、boolean、Person等类型:

在这里插入图片描述

泛型实现类型参数化

虽然any是可以的,但是定义为any的时候,我们其实已经丢失了类型信息:

  • 比如我们传入的是一个number,那么我们希望返回的可不是any类型,而是number类型;
  • 所以,我们需要在函数中可以捕获到参数的类型是number,并且同时使用它来作为返回值的类型;

我们需要在这里使用一种特殊的变量 - 类型变量(type variable),它作用于类型,而不是值:

在这里插入图片描述

  • 方式一:通过 <类型> 的方式将类型传递给函数;
  • 方式二:通过类型推到,自动推到出我们传入变量的类型:
    • 在这里会推导出它们是 字面量类型的,因为字面量类型对于我们的函数也是适用的

在这里插入图片描述

泛型的基本补充

当然我们也可以传入多个类型:

在这里插入图片描述

平时在开发中我们可能会看到一些常用的名称:

  • T:Type的缩写,类型
  • K、V:key和value的缩写,键值对
  • E:Element的缩写,元素
  • O:Object的缩写,对象

泛型接口

在定义接口的时候我们也可以使用泛型:

在这里插入图片描述

泛型类

我们也可以编写一个泛型类:

在这里插入图片描述

泛型约束

有时候我们希望传入的类型有某些共性,但是这些共性可能不是在同一种类型中:

  • 比如string和array都是有length的,或者某些对象也是会有length属性的;
  • 那么只要是拥有length的属性都可以作为我们的参数类型,那么应该如何操作呢?
    在这里插入图片描述

模块化开发

TypeScript支持两种方式来控制我们的作用域:

  • 模块化:每个文件可以是一个独立的模块,支持ES Module,也支持CommonJS;
  • 命名空间:通过namespace来声明一个命名空间

在这里插入图片描述

命名空间namespace

命名空间在TypeScript早期时,称之为内部模块,主要目的是将一个模块内部再进行作用域的划分,防止一些命名冲突的问题。

在这里插入图片描述

类型的查找

之前我们所有的typescript中的类型,几乎都是我们自己编写的,但是我们也有用到一些其他的类型:

在这里插入图片描述

大家是否会奇怪,我们的HTMLImageElement类型来自哪里呢?甚至是document为什么可以有getElementById的方法呢?

  • 其实这里就涉及到typescript对类型的管理和查找规则了。

我们这里先给大家介绍另外的一种typescript文件:.d.ts文件

  • 我们之前编写的typescript文件都是 .ts 文件,这些文件最终会输出 .js 文件,也是我们通常编写代码的地方;
  • 还有另外一种文件 .d.ts 文件,它是用来做类型的声明(declare)。 它仅仅用来做类型检测,告知typescript我们有哪些类型;

那么typescript会在哪里查找我们的类型声明呢?

  • 内置类型声明;
  • 外部定义类型声明;
  • 自己定义类型声明;

内置类型声明

内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件;包括比如Math、Date等内置类型,也包括DOM API,比如Window、Document等;

内置类型声明通常在我们安装typescript的环境中会带有的:https://github.com/microsoft/TypeScript/tree/main/lib

外部定义类型声明和自定义声明

外部类型声明通常是我们使用一些库(比如第三方库)时,需要的一些类型声明。

这些库通常有两种类型声明方式:

方式一:在自己库中进行类型声明(编写.d.ts文件),比如axios

方式二:通过社区的一个公有库DefinitelyTyped存放类型声明文件

  • 该库的GitHub地址:https://github.com/DefinitelyTyped/DefinitelyTyped/
  • 该库查找声明安装方式的地址:https://www.typescriptlang.org/dt/search?search=
  • 比如我们安装react的类型声明: npm i @types/react --save-dev

什么情况下需要自己来定义声明文件呢?

  • 情况一:我们使用的第三方库是一个纯的JavaScript库,没有对应的声明文件;比如lodash
  • 情况二:我们给自己的代码中声明一些类型,方便在其他地方直接进行使用;

声明变量-函数-类

在这里插入图片描述

声明模块

我们也可以声明模块,比如lodash模块默认不能使用的情况,可以自己来声明这个模块:

在这里插入图片描述

声明模块的语法: declare module ‘模块名’ {}。

  • 在声明模块的内部,我们可以通过 export 导出对应库的类、函数等;

declare文件

在某些情况下,我们也可以声明文件:

  • 比如在开发vue的过程中,默认是不识别我们的.vue文件的,那么我们就需要对其进行文件的声明;
  • 比如在开发中我们使用了 jpg 这类图片文件,默认typescript也是不支持的,也需要对其进行声明;

在这里插入图片描述

declare命名空间

比如我们在index.html中直接引入了jQuery:

  • CDN地址: https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js

我们可以进行命名空间的声明:

在这里插入图片描述

在main.ts中就可以使用了

在这里插入图片描述

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值