TypeScript中extends關鍵字的使用場景及說明
在 TypeScript 中，extends 關鍵字是實現(xiàn)類繼承和泛型約束的核心語法。它允許開發(fā)者通過繼承擴展類的功能，或者通過約束泛型參數(shù)來增強代碼的靈活性和安全性。
本文將詳細介紹 extends 關鍵字在不同場景下的使用方法和實際案例。
一、類繼承中的extends
（一）定義與作用
在 TypeScript 中，extends 關鍵字用于表示一個類繼承自另一個類。子類可以繼承父類的屬性和方法，并可以添加新的屬性和方法或覆蓋父類的方法。
基礎語法
class Parent {
constructor(public name: string) {}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
class Child extends Parent {
constructor(name: string, public age: number) {
super(name); // 調用父類的構造函數(shù)
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old`);
}
}
在這個例子中，Child 類繼承了 Parent 類。Child 類通過 super 調用了父類的構造函數(shù)，并添加了一個新的屬性 age 和一個覆蓋的 greet 方法。
（二）使用場景
擴展功能
通過繼承，子類可以擴展父類的功能，同時保持代碼的復用性。
class Animal {
constructor(public name: string) {}
makeSound() {
console.log(`${this.name} makes a sound`);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
makeSound() {
console.log(`${this.name} barks`);
}
}
在這個例子中，Dog 類繼承了 Animal 類，并覆蓋了 makeSound 方法，以實現(xiàn)特定的行為。
實現(xiàn)多態(tài)
繼承是實現(xiàn)多態(tài)的基礎。通過繼承，子類可以覆蓋父類的方法，從而實現(xiàn)不同的行為。
class Shape {
draw() {
console.log("Drawing a shape");
}
}
class Circle extends Shape {
draw() {
console.log("Drawing a circle");
}
}
class Square extends Shape {
draw() {
console.log("Drawing a square");
}
}
function drawShape(shape: Shape) {
shape.draw();
}
const circle = new Circle();
const square = new Square();
drawShape(circle); // 輸出: Drawing a circle
drawShape(square); // 輸出: Drawing a square
在這個例子中，Circle 和 Square 類繼承了 Shape 類，并覆蓋了 draw 方法。drawShape 函數(shù)可以接受任何 Shape 類型的對象，并調用其 draw 方法，從而實現(xiàn)多態(tài)。
二、泛型約束中的extends
（一）定義與作用
在泛型中，extends 關鍵字用于約束泛型參數(shù)的類型。通過 extends，可以指定泛型參數(shù)必須是某個類型或其子類型的實例。
基礎語法
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
const obj = { a: 1, b: 'hello' };
const value = getProperty(obj, 'b'); // value 的類型是 'hello'
在這個例子中，泛型參數(shù) K 被約束為 T 的鍵類型（keyof T）。這確保了 key 參數(shù)必須是 obj 的有效鍵。
（二）使用場景
約束泛型參數(shù)
通過 extends，可以確保泛型參數(shù)滿足特定的條件，從而提高代碼的安全性和可讀性。
class Component<T extends HTMLElement> {
constructor(public element: T) {}
getInnerText(): string {
return this.element.innerText;
}
}
const divComponent = new Component(document.createElement('div'));
console.log(divComponent.getInnerText()); // 輸出: 空字符串
在這個例子中，Component 類的泛型參數(shù) T 被約束為 HTMLElement 或其子類型。這確保了 element 屬性是一個有效的 DOM 元素。
實現(xiàn)高級類型模式
extends 可以用于實現(xiàn)更復雜的類型模式，如條件類型和映射類型。
type MyType<T extends string | number> = T extends string ? { value: T } : { value: number };
const strType: MyType<string> = { value: 'hello' };
const numType: MyType<number> = { value: 42 };
在這個例子中，MyType 是一個條件類型，根據(jù)泛型參數(shù) T 的類型返回不同的結構。
三、接口繼承中的extends
（一）定義與作用
在接口中，extends 關鍵字用于表示一個接口繼承自另一個接口。子接口可以擴展父接口的屬性和方法。
基礎語法
interface Animal {
name: string;
makeSound(): void;
}
interface Dog extends Animal {
bark(): void;
}
function getAnimalSound(animal: Animal) {
animal.makeSound();
}
const myDog: Dog = {
name: 'Buddy',
makeSound() {
console.log(`${this.name} makes a sound`);
},
bark() {
console.log(`${this.name} barks`);
}
};
getAnimalSound(myDog); // 輸出: Buddy makes a sound
在這個例子中，Dog 接口繼承了 Animal 接口，并添加了一個新的方法 bark。
（二）使用場景
擴展接口功能
通過繼承，接口可以擴展其他接口的功能，同時保持代碼的復用性。
interface Shape {
draw(): void;
}
interface Circle extends Shape {
radius: number;
}
interface Square extends Shape {
sideLength: number;
}
function drawShape(shape: Shape) {
shape.draw();
}
const myCircle: Circle = {
radius: 5,
draw() {
console.log(`Drawing a circle with radius ${this.radius}`);
}
};
const mySquare: Square = {
sideLength: 4,
draw() {
console.log(`Drawing a square with side length ${this.sideLength}`);
}
};
drawShape(myCircle); // 輸出: Drawing a circle with radius 5
drawShape(mySquare); // 輸出: Drawing a square with side length 4
在這個例子中，Circle 和 Square 接口繼承了 Shape 接口，并添加了特定的屬性。
四、總結
extends 關鍵字在 TypeScript 中用于實現(xiàn)類繼承、泛型約束和接口繼承。通過 extends，可以擴展類和接口的功能，約束泛型參數(shù)的類型，從而提高代碼的復用性、安全性和靈活性。
希望本文能夠幫助你更好地理解和使用 extends 關鍵字，提升你的 TypeScript 開發(fā)能力。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現(xiàn)滾動條滾動到某個位置便自動定位某個tr的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
細說JS數(shù)組遍歷的一些細節(jié)及實現(xiàn)
本文主要介紹了細說JS數(shù)組遍歷的一些細節(jié)及實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
JavaScript輸出數(shù)據(jù)的多種方式小結
這篇文章主要介紹了 JavaScript 輸出數(shù)據(jù)的多種方式,包括使用彈出警告框、寫入 HTML 文檔、使用 innerHTML 寫入 HTML 元素、寫入瀏覽器控制臺,還講解了操作 HTML 元素的方法,需要的朋友可以參考下2024-12-12
創(chuàng)建、調用JavaScript對象的方法集錦
這篇文章主要介紹了創(chuàng)建、調用JavaScript對象的方法集錦,需要的朋友可以參考下2014-12-12
用js實現(xiàn)多域名不同文件的調用方法...2007-01-01
今天小編就為大家分享一篇layui彈出框Tab選項卡的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
面試?？?js中 Map和 Object 的區(qū)別小結
Map和Object都是鍵值對存儲結構,但存在顯著差異,本文就來介紹一下js中 Map和 Object 的區(qū)別小結,具有一定的參考價值,感興趣的可以了解一下2025-09-09
兼容IE和Firefox的javascript獲取iframe文檔內(nèi)容的函數(shù)
兼容IE和Firefox的javascript獲取iframe文檔內(nèi)容的函數(shù)，需要的朋友可以參考下。2011-08-08
對字符串進行HTML編碼和解碼的JavaScript函數(shù)
對字符串進行HTML編碼和解碼的JS函數(shù)，記下了方便以后找 :)2010-02-02
基于JavaScript實現(xiàn)每日簽到打卡軌跡功能
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)每日簽到打卡軌跡功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11