TypeScript中extends的用法

编程入门 行业动态 更新时间:2024-10-26 12:29:53

<a href=https://www.elefans.com/category/jswz/34/1771354.html style=TypeScript中extends的用法"/>

TypeScript中extends的用法

介绍

extends 关键字在 TypeScript 中有多种应用,包括泛型约束、继承类、接口继承和条件类型。通过灵活使用 extends,TypeScript 提供了丰富的工具来增强类型安全性,使代码更具表现力和可维护性。

1. 约束接口的继承
extends 关键字也可用于接口。通过接口继承,我们可以创建一个继承另一个接口的新接口,并添加额外的属性或方法。

interface Person {name: string;age: number;
}interface Employee extends Person {employeeId: number;
}const employee: Employee = {name: "John",age: 30,employeeId: 12345
};

2. 约束类的继承
在 TypeScript 中,extends 关键字也用于类的继承。子类可以继承父类的属性和方法,并在需要时进行重写。

class Animal {name: string;constructor(name: string) {this.name = name;}
}class Dog extends Animal {breed: string;constructor(name: string, breed: string) {super(name);this.breed = breed;}
}const myDog = new Dog("Fido", "Golden Retriever");
console.log(myDog.name); // 访问父类属性
console.log(myDog.breed); // 访问子类属性

3. 约束泛型类型参数
在 TypeScript 中,泛型(generics)使我们能够编写可重用的函数、类和组件,同时保持类型的安全性。extends 关键字在泛型中常常用于约束泛型类型参数,以确保传入的类型符合某些要求。

function lengthOfArray<T>(arr: T[]): number {return arr.length;
}const numbers = [1, 2, 3];
const result = lengthOfArray(numbers);

在上面的示例中,T 是泛型类型参数,它可以是任何类型。但有时我们希望泛型参数必须是某种类型的子类型。这时可以使用 extends 关键字来添加约束:

function firstElement<T extends Array<any>>(arr: T): T[0] {return arr[0];
}const numbers = [1, 2, 3];
const firstNum = firstElement(numbers); // firstNum 的类型是 number

<T extends Array> 表示 T 必须是 Array 或其子类型。这确保了传入的参数 arr 是一个数组,从而允许我们安全地访问其第一个元素。

4.条件类型
在 TypeScript 2.8+ 中,extends 关键字还被用于条件类型。条件类型使我们能够基于类型参数的属性来确定最终的类型。

type NonNullable<T> = T extends null | undefined ? never : T;const x: string | null = "hello";
const y: string = x; // 编译通过const a: string | null = null;
const b: string = a; // 报错

在上述示例中,NonNullable 是一个条件类型,它检查泛型类型 T 是否是 null 或 undefined,如果是,则返回 never 类型,否则返回 T 类型。这允许我们确保某个值不会为 null 或 undefined。

更多推荐

TypeScript中extends的用法

本文发布于:2023-12-05 07:34:24,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1663540.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:TypeScript   extends

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!