TypeScript类型编程绕不开的extends关键字

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

• TypeScript知识点和99个类型体操-专栏-每周更新

• vue3核心原理精讲-专栏-持续更新中...

• 如何利用vite中的虚拟模块技术重定向文件

• 把localStorage玩出花儿？

前言

extends关键字相信大家都不陌生，我们在javascript中实现类的继承就是基于它的，在TypeScript中也有基于该关键字的表达形式：

• 接口继承

• 条件表达式

• 类继承

接口继承

从功能上来讲，他和javascript中的继承表达的含义是一样的，即：继承一个接口，获得其对应的字段类型声明，同时允许进行扩展

interface Animal{
    classes:string;
}
interface Person extends Animal{
    name:string;
    hobby:string;
}

下图是一个使用示例

那，我现在有一个疑问：它和交叉类型有啥区别呢？

你想出来结果了吗？如果没有的话，也许你可以关注我，后边我会单独写一篇文章说明的🤪（ps：我本来写了一半的，后来感觉这与本文无关，就...）

类继承

单从继承的语法角度来说，它和javascript中的继承可以说是一毛一样，以下是一个网上的示例：

class Animal { 
    name: string; 
    constructor(theName: string) { 
        this.name = theName; 
    } 
    move(distanceInMeters: number = 0) { 
        console.log(`${this.name} moved ${distanceInMeters}m.`); 
    }
} 
class Snake extends Animal { 
    constructor(name: string) { 
        super(name); 
    } 
    move(distanceInMeters = 5) { 
        console.log("Slithering..."); 
        super.move(distanceInMeters); 
    } 
}

条件表达式

其实extends构建条件类型才是本文最最最重要想要表达的内容，它允许我们根据不同分支条件创建新的类型：

父子类型校验

我们知道在TypeScript中，协变特性允许使用子类型来代替父类型，但这是发生在ts内部的行为，如果我们想自己去检查两个类型的父子关系，就可以使用extends来校验

对于联合类型，也是一样的

与泛型结合

1-泛型参数是"裸类型"，是联合类型

首先，裸类型指的是没有被数组、元组或Promise包装过的类型，它们又统称为分布式条件类型。在TypeScript中，如果该分布式条件类型是联合类型，则会执行分配律，并返回一个联合类型

如下，新建工具类型Get，它接收一个泛型参数T，我们使用T来代替上文中的类型B

type Get<T> = T extends A ? string : number

现在我们将类型B作为泛型参数传递给Get，结果如下

现在，我们按照分配律对代码进行拆分，它等价于如下的写法，即分别将联合类型中的每一项带入表达式计算结果，然后对每一次的结果取联合

2-泛型参数是never

在TypeScript中，never类型标识一个绝不存在的类型，如果你将never作为泛型参数进行传递，则你可以认为它不会触发ts的推断，也就是你的Get工具类型压根儿就不会被运行

这其实是很好理解的，但是我为啥子还要单独拿出来说呢？看下边这个例子，得到的却是string。这其实是因为never是任意类型的子类型

实战

我在TypeScript中已经发布的4篇类型体操中实现的25个工具类型大部分都对该关键字进行了使用，有兴趣的小伙伴可以找到相关文章进行阅览哦

---

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎