少数人都不知道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的第二种用法在实际业务中吗?

相关推荐
海天胜景2 分钟前
无法加载文件 E:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
MingT 明天你好!5 分钟前
在vs code 中无法运行npm并报无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
前端·npm·node.js·visual studio code
老兵发新帖10 分钟前
pnpm 与 npm 的核心区别
前端·npm·node.js
超级土豆粉12 分钟前
怎么打包发布到npm?——从零到一的详细指南
前端·npm·node.js
OpenTiny社区16 分钟前
TinyEngine 2.5版本正式发布:多选交互优化升级,页面预览支持热更新,性能持续跃升!
前端·低代码·开源·交互·opentiny
声声codeGrandMaster39 分钟前
Django框架的前端部分使用Ajax请求一
前端·后端·python·ajax·django
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards (展开式卡片)
javascript·vue.js·ecmascript
重生之后端学习2 小时前
02-前端Web开发(JS+Vue+Ajax)
java·开发语言·前端·javascript·vue.js
繁依Fanyi3 小时前
用 CodeBuddy 实现「IdeaSpark 每日灵感卡」:一场 UI 与灵感的极简之旅
开发语言·前端·游戏·ui·编辑器·codebuddy首席试玩官
黄鹂绿柳5 小时前
Vue+Vite学习笔记
vue.js·笔记·学习