TypeScript 中如何声明接口类型-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的日益复杂化，使用 TypeScript 来增加代码的可读性和可维护性已经成为了一种趋势。在 TypeScript 中，可以使用接口类型来定义对象的形状。

接口类型的基本定义

在 TypeScript 中，我们可以使用 interface 关键字来声明接口类型，接口的定义方式如下：

interface MyInterface {
  prop1: string;
  prop2: number;
}

这个接口的定义表示，任何一个 MyInterface 类型的对象都必须包含一个名为 prop1 的属性，它的值必须是字符串类型；以及一个名为 prop2 的属性，它的值必须是数字类型。

除了属性之外，接口类型还可以包含方法 signatures:

interface MyInterface {
  prop1: string;
  prop2: number;
  method1(): void;
}

这个接口的定义表示，任何一个 MyInterface 类型的对象都必须包含一个名为 prop1 的属性，它的值必须是字符串类型；以及一个名为 prop2 的属性，它的值必须是数字类型。此外，这个对象还必须包含一个名为 method1 的方法，它的返回值类型为 void。

可选属性

在接口类型中，有时候我们需要定义一些可选的属性，这个时候可以使用 ? 符号来声明。

interface MyInterface {
  prop1: string;
  prop2?: number;
}

这个接口的定义表示，任何一个 MyInterface 类型的对象都必须包含一个名为 prop1 的属性，它的值必须是字符串类型；但是 prop2 这个属性是可选的，它的值可以是数字类型，也可以是 undefined。

只读属性

在接口类型中，还有一种特殊的属性是只读属性，它的值在对象创建之后不能被修改。在 TypeScript 中，可以使用 readonly 关键字来声明只读属性。

interface MyInterface {
  readonly prop1: string;
  prop2: number;
}

这个接口的定义表示，任何一个 MyInterface 类型的对象都必须包含一个名为 prop1 的只读属性，它的值无法被修改；以及一个名为 prop2 的属性，它的值必须是数字类型。

继承接口类型

在 TypeScript 中，接口类型也可以继承自其他的接口类型，这个过程使用 extends 关键字来实现。

interface MyBaseInterface {
  prop1: string;
}

interface MyInterface extends MyBaseInterface {
  prop2: number;
}

这个例子中，我们声明了一个名为 MyBaseInterface 的接口类型，它只包含一个名为 prop1 的属性。然后，我们声明了一个名为 MyInterface 的接口类型，它继承自 MyBaseInterface，并且另外还包含一个名为 prop2 的属性。

示例代码

下面是一个使用接口类型的示例代码：

// javascriptcn.com 代码示例
interface User {
  id: number;
  name: string;
  birthdate?: Date;
  readonly createdAt: Date;
}

function createUser(user: User): void {
  console.log(`创建用户 ${user.name} 成功！`);
}

const newUser: User = {
  id: 1,
  name: 'Alice',
  createdAt: new Date()
};

createUser(newUser);

这个例子中，我们声明了一个名为 User 的接口类型，它包含四个属性：id，name，birthdate 和 createdAt。其中，id 和 name 属性是必须的，birthdate 属性是可选的，createdAt 属性是只读的。

然后，我们定义了一个 createUser 函数，它接受一个 User 类型的参数，并且打印一条提示信息。最后，我们创建了一个名为 newUser 的变量，它是一个 User 类型的对象，我们传递它给 createUser 函数，输出了一条提示信息。

总结

在 TypeScript 中，通过使用接口类型可以明确对象的形状，提高代码的可读性和可维护性。在定义接口类型时，可以使用可选属性、只读属性和继承来满足不同的需求。通过不断学习和实践，我们可以更加熟练地使用接口类型来编写高质量的 TypeScript 代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e627c7d4982a6ebf6a420