TypeScript 如何扩展接口并重写属性类型

在本文中，我们将介绍在TypeScript中如何扩展接口并重写属性的类型。

TypeScript是一种静态类型检查的编程语言，它是JavaScript的一个超集，可以编译成纯JavaScript代码。TypeScript通过给JavaScript添加类型注解来提供静态类型检查，并且拥有更强大的面向对象特性。接口在TypeScript中是用于描述对象的形状的一种机制，它可以定义对象的属性、方法和可选项。

阅读更多：TypeScript 教程

接口的基本用法

在介绍如何扩展接口并重写属性类型之前，我们先来了解一下接口的基本用法。通过接口，我们可以更加明确地定义对象的结构。下面是一个示例：

interface Person {
  name: string;
  age: number;
  greet: () => void;
}

const person: Person = {
  name: "Alice",
  age: 25,
  greet: () => {
    console.log("Hello, I'm " + person.name);
  }
};

person.greet(); // 输出：Hello, I'm Alice

上述示例中，我们定义了一个名为Person的接口，它包含了name、age和greet这三个属性。然后我们创建了一个符合Person接口定义的对象，并调用对象的greet方法。

扩展接口

有时候我们需要在已有的接口基础上进行扩展，添加额外的属性。在TypeScript中，我们可以使用extends关键字来实现接口的扩展。下面是一个示例：

interface Person {
  name: string;
  age: number;
  greet: () => void;
}

interface Employee extends Person {
  department: string;
}

const employee: Employee = {
  name: "Bob",
  age: 30,
  greet: () => {
    console.log("Hello, I'm " + employee.name);
  },
  department: "HR"
};

console.log(employee.department); // 输出：HR
employee.greet(); // 输出：Hello, I'm Bob

在上述示例中，我们定义了一个名为Employee的接口，它通过extends关键字扩展了Person接口。Employee接口添加了一个新的属性department。我们创建了一个符合Employee接口定义的对象，并且可以访问到新增的属性department。

重写属性类型

在扩展接口的同时，我们有时候还需要重写已有属性的类型。在TypeScript中，我们可以通过在新接口中重新定义该属性来实现。下面是一个示例：

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  name: string;
  department: string;
}

const employee: Employee = {
  name: "Bob",
  age: 30,
  department: "HR"
};

console.log(employee.name); // 输出：Bob