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); // 调用父类的构造函数
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old`);
  }
}

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`);
  }
}

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

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'

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()); // 输出: 空字符串

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 };

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

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