Typescript - 泛型介绍与使用方法教程

介绍

泛型:generics,参数化类型,全称为 泛型参数,我们接下来都简称为泛型 。

学过面向对象语言的小伙伴都知道继承。但是在这里我要说的是:继承不是某一门语言的特性,是某一类语言的特性。哪一类呢?答案是面向对象语言。好了,问题又来了,面向对象语言为什么要实现继承的特征呢?因为继承背后的思想是代码重用/复用/共享,编写的代码可以被许多派生类型的对象所重用。

因为我们要复用代码,所以有了继承。

有时候我们嫌代码的力度太小,想要复用文件,怎么办呢?import 关键字应运而生。在Java里面,import 运行后被编译器替换为包的路径限定名。语法 import 包名 帮助我们实现了文件的复用。

在JavaScript里面, import 文件名 运行后帮助我们在作用域链上方建立了一个 module 作用域。import 帮助我们实现了文件的复用。

小示例

写一个函数,这个函数会返回任何传入的值。

eg:不用泛型的话,这个函数可能是下面这样:

function identity(arg: number): number {
    return arg;
}

如果我们要编写框架,就要考虑到各种返回值的情况,于是可能就会有这样的代码:

type idBoolean = (arg: boolean) => boolean;
type idNumber = (arg: number) => number;
type idString = (arg: string) => string;

很明显,我们的这些代码逻辑是相同的,但是由于需要,我们不得不写 n 遍这样的逻辑。

有些小伙伴可能会说,我们可以使用any类型来定义函数:

function identity(arg: any): any {
    return arg;
}

使用any类型会导致这个函数可以接收任何类型的arg参数,这样就丢失了一些信息:传入的类型与返回的类型应该是相同的。

所以为了解决算法的复用,我们引入了泛型的概念。如下所示:

function identity<T>(arg: T): T {
    return arg;
}

我们给identity添加了类型变量T。 T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。

接下来我们就可以通过这样的语法调用 identity 函数。

identity<string>('hello');

泛型就是创建类型变量用以接受任意类型。

泛型是什么?

普通函数要求我们对 值 编程,泛型则要求我们对 类型 编程。

啊?天呐!类型还可以编程?当初笔者也比较迷惑,类型怎样编程,后来随着对TS的深入理解,逐渐清晰了所谓的类型编程和值编程。

类型编程

接下来带你体验一下所谓的类型编程。

我们在 TypeScript 中有这样两个操作符 ‘|’ 和 ‘&’。

  • ‘|’:取并集运算符。
  • ‘&’:取交集运算符。

我们先来看看集合的概念。

文氏图

文氏图用于展示在不同的事物群组(集合)之间的数学或逻辑联系,尤其适合用来表示集合(或)类之间的 “大致关系”,它也常常被用来帮助推导(或理解推导过程)关于集合运算(或类运算)的一些规律。

在文氏图法中,如果有论域,则以一个矩形框(的内部区域)表示论域;各个集合(或类)就以圆/椭圆(的内部区域)来表示。两个圆/椭圆相交,其相交部分表示两个集合(或类)的公共元素,两个圆/椭圆不相交(相离或相切,而实际上在文氏图中相切是没有什么意义的,因为文氏图是以图形的内部区域来表示的)则说明这两个集合(或类)没有公共元素。

比如黄色的圆圈(集合 A)可以表示两足的所有动物。蓝色的圆圈(集合 B)可以表示会飞的所有动物。黄色和蓝色的圆圈交叠的区域(叫做交集)包含会飞且两足的所有动物 —— 比如鹦鹉。 (把每个单独的动物类型想像为在这个图中的某个点)。

在这里插入图片描述

在TypeScript中,我们的类型就是取自集合的思想。例如: string 类型是所有字符串的集合, number 是所有数字的集合。在 TS 中不仅有这些已经定义好的类型,还有可以提供我们自定义类型的关键字。例如: interface 。我们使用联合类型(A|B)表示集合中的元素属于 A 或者属于 B 。使用交叉类型(A&B)表示集合中的元素既属于 A 又属于 B 。

如果 A = {name: string} , B = {age: number},那么
属于 A 或者属于 B的元素(A|B)为仅仅包含name或仅仅包含age或包含name和age的对象,既属于 A 又属于 B的元素(A&B)为包含name和age的对象。

示例1:

在 TypeScript 中编程要注意将文件的

interface cat = {name: string, purrs: boolean};
interface dog = {name: string, barks: boolean};
interface catAndDog = cat & dog;
interface catOrDog = cat | dog;
let a: catOrDog = {name: 'jack',purrs: true,barks: boolean};
a = {name: 'jack', purrs: true};
a = {name: 'jack', barks: true};
let b: catAndDog = {name: 'tom',purrs: true,barks: boolean}

示例2:

假设我们定义了一个person shape:

interface Person {
    name: string,
    age: number,
    phone: string
}

有一个需求是填写表单并统计,其中 name age 和 phone 是k可选的,但是 age 是可选的。我们可以再造一个接口

interface Person {
    name?: string,
    age?: number,
    phone?: string
}

好了,我们的需求解决了,啊哈。

不过TypeScript为我们提供了一种更好的方式----Partial。我们还可以通过这种方式 Partial 实现上面的需求。

嗯????Partial帮助我们完成了什么工作呢?怎么就这么突然就帮我们将 Person 的必选项转化为可选项了呢?我们来猜想一下他的实现步骤~

// js伪代码
functon Partial(Type){
    // 遍历Type
    for(k in Type){
        // 将Type中的每个元素转化为可选的
        Type[k] = Optional(k);
    }
    return Type;
}
// 可以看成是上面的函数定义,可以接受任意类型。由于是这里的 “Type” 形参,因此理论上你叫什么名字都是无所谓的,就好像函数定义的形参一样。
type Partial<Type> = { do something }
// 可以看成是上面的函数调用,调用的时候传入了具体的类型 Person
type PartialedPerson = Partial<Person>

接下来看下函数调用和类型调用写法对比。





ts 泛型的作用,TS中的泛型TS-泛型的基本用法TS 一些工具泛型的使用及其实现ts泛型详细教程TS中的泛型精简(快速掌握)TS学习之泛型TS 泛型如何使用TS之泛型的使用TS-泛型的基本使用TS-泛型的基本用法ts中泛型的使用ts泛型方法的定义和使用,ts泛型怎么写【TypeScript】TS泛型讲解及其使用在TypeScript 中使用泛型的方法Typescript中的泛型的作用及使用场景 ts泛型接口的使用TS 如何在 interface 内使用泛型Typescript - 泛型介绍与使用方法教程

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值