少数人都不知道TS(extends)的第二个的用法

在 TypeScript(TS)中,extends 关键字用于类型继承。这意味着你可以创建一个类型,这个类型继承了另一个类型的所有成员。这为创建接口的接口或者在抽象类型上进行进一步抽象提供了方便。

敲黑板

但是他还有个用法,就是可以用作'判断'当前类型是否符合某个条件。

具体是什么我们下列来举例就懂了。

以下是类型继承的一些基本示例:

1、接口继承

你可以使用 extends 关键字来继承一个接口的所有成员:

php 复制代码
interface Animal {  
    name: string;  
    makeSound(): string;  
}  
  
interface Dog extends Animal {  
    breed: string;  
}

在这个例子中,Dog 接口继承了 Animal 接口的所有成员,并添加了一个新的成员 breed

当我们给某个值指定Dog类型的时候,就会提示需要的属性。

这就体现了extends的一个继承属性,当前属性继承父类属性。

2、抽象类和具体类之间的继承

你也可以使用 extends 关键字来创建一个类,该类继承了一个抽象类的所有成员:

scala 复制代码
abstract class Animal {    
    abstract name: string;    
    abstract makeSound(): string;    
}    
    
class Dog extends Animal {    
    name: string = "hello";  // 实现 name 属性  
    makeSound() { return "world!"; }  // 实现 makeSound 方法  
}

在这个例子中,Dog 类继承了 Animal 抽象类的所有成员,并提供了具体实现。

3. 类型参数化的继承

可以在类型参数化的情况下使用 extends 关键字:

csharp 复制代码
interface Animal {
  name: string
}

interface Creator<T> {  
  create(): T;  
}  

interface AnimalCreator extends Creator<Animal> {}

const obj: AnimalCreator = {

}

在这个例子中,AnimalCreator 接口继承了 Creator 接口的所有成员,并添加了类型参数 T。这意味着任何实现 AnimalCreator 接口的类型都必须能够创建一个 Animal 或其子类型的实例。

AnimalCreator 必须实现 create 方法并返回 Animal 或其子类型。

重头戏来了,extends第二类用法:

我接下来举几个常用例子体操你们就明白了。

1、首个字母转为大写

typescript 复制代码
type InitialsUppercase<T> = T extends `${infer L}${infer R}` ? `${Uppercase<L>}${R}` : null

哟,这个类型会把我们传过去的字符串转为单个字母大写的字符串类型。

首先,让我们分解这段代码,如果传过来的泛型 T 可以被拆分为两部分(例如abc,拆解只会left = a, right = bc)并且利用infer做个类型的推断则条件成立,利用Uppercase内置的类型方法把当前L转为大写,并且拼接剩余部分返回,否则不可拆分返回null

注意:infer 关键字是用于在条件类型中推断变量的类型。当你有一个条件类型,并希望在满足条件时推断出某个变量的类型,你可以使用 infer 关键字。

2、横杠命名转化为驼峰命名

这里需要用到上面的类型,并且难度稍微增加,用到了类型递归

typescript 复制代码
type CamelCase<T, Prve extends string = ''> = T extends `${infer L}-${infer R}`
  ? CamelCase<R, `${Prve}${InitialsUppercase<L>}`>
  : `${Prve}${InitialsUppercase<T>}`;

老规矩,分解下这段代码:该类型接收两个参数,如果泛型T能根据-被拆分为(abc-def-hij: abc, def-hij)则递归剩余值,并且把刚刚拆出来的值首字母大写并拼接回传入的结果值;否则返回最终拼接的结果值。

这种类型体操一般用在写底层框架时用到,当用户传入一个自定义方法时,我们需要规范的转换命名去执行内部方法。

  • 在这几个例子中,extends 是用来检查类型 T 是否符合特定的模式。如果 T 符合这个模式(即它是一个由两部分组成的模板字符串),那么这个条件就会为真,并且相应的结果类型会被推断出来。如果 T 不符合这个模式,那么结果类型就是另外分支返回类型。
  • 使用 extends 而不是直接比较类型,为类型系统提供了更强的类型安全性和灵活性。通过这种方式,我们可以定义复杂的模式匹配逻辑,并确保只有符合这些模式的类型才会被处理或推断。

好了,例子用法就介绍到这,那么你会用extends的第二种用法在实际业务中吗?

相关推荐
崔庆才丨静觅13 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606114 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了14 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅14 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅14 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅14 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment15 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅15 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊15 小时前
jwt介绍
前端
爱敲代码的小鱼15 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax