跳到主要内容

TypeScript 接口

介绍

在 TypeScript 中,接口(Interface) 是一种强大的工具,用于定义对象的结构。通过接口,你可以明确指定对象应该包含哪些属性、方法以及它们的类型。接口的主要作用是确保代码中的对象符合预期的结构,从而提高代码的可读性和可维护性。

接口是 TypeScript 类型系统的核心部分,它们不仅可以帮助你在开发过程中捕获潜在的错误,还能为你的代码提供清晰的文档。

基本语法

定义一个接口非常简单。使用 interface 关键字,后跟接口的名称和一对大括号 {},在大括号中定义对象的属性和方法。

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

在这个例子中,我们定义了一个名为 Person 的接口,它要求对象必须包含 nameage 两个属性,且它们的类型分别为 stringnumber

使用接口

定义好接口后,你可以用它来约束对象的类型:

typescript
const user: Person = {
name: "Alice",
age: 25,
};

如果你尝试创建一个不符合接口定义的对象,TypeScript 会报错:

typescript
const invalidUser: Person = {
name: "Bob",
// 缺少 age 属性
};
警告

注意:如果对象缺少接口中定义的属性,或者属性的类型不匹配,TypeScript 会抛出错误。

可选属性

有时,你可能希望某些属性是可选的。在接口中,你可以通过在属性名后添加 ? 来标记可选属性:

typescript
interface Person {
name: string;
age?: number; // age 是可选的
}

现在,age 属性不再是必需的:

typescript
const user: Person = {
name: "Alice",
};

只读属性

如果你希望某些属性在对象创建后不能被修改,可以使用 readonly 关键字:

typescript
interface Person {
readonly id: number;
name: string;
age?: number;
}

一旦 id 被赋值,就不能再修改:

typescript
const user: Person = {
id: 1,
name: "Alice",
};

user.id = 2; // 错误:无法分配到 "id",因为它是只读属性

函数类型

接口不仅可以描述对象的属性,还可以描述函数的结构。例如,你可以定义一个函数接口:

typescript
interface SearchFunc {
(source: string, subString: string): boolean;
}

然后,你可以使用这个接口来约束函数的类型:

typescript
const mySearch: SearchFunc = function (source, subString) {
return source.includes(subString);
};

接口的继承

接口可以通过 extends 关键字继承其他接口。这使得你可以复用已有的接口定义,并在此基础上扩展新的属性或方法。

typescript
interface Animal {
name: string;
}

interface Dog extends Animal {
breed: string;
}

const myDog: Dog = {
name: "Buddy",
breed: "Golden Retriever",
};

在这个例子中,Dog 接口继承了 Animal 接口的所有属性,并添加了一个新的 breed 属性。

实际应用场景

1. API 响应数据的类型定义

在与后端 API 交互时,接口可以帮助你定义响应数据的结构。例如:

typescript
interface ApiResponse {
status: number;
data: {
id: number;
name: string;
email: string;
};
}

2. 组件 Props 的类型定义

在 React 等前端框架中,接口常用于定义组件的 Props 类型:

typescript
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
return (
<button onClick={onClick} disabled={disabled}>
{label}
</button>
);
};

总结

TypeScript 接口是定义对象结构的有力工具。通过接口,你可以确保对象符合预期的类型,从而提高代码的健壮性和可维护性。无论是定义简单的对象结构,还是描述复杂的函数类型,接口都能为你提供清晰的类型约束。

提示

建议:在实际开发中,尽量使用接口来定义对象的类型,这样可以让代码更加清晰和易于维护。

附加资源

练习

  1. 定义一个接口 Car,包含 brandmodelyear 三个属性。
  2. 创建一个函数接口 Calculator,包含 addsubtract 两个方法。
  3. 使用接口继承,定义一个 ElectricCar 接口,继承自 Car,并添加 batteryLife 属性。

通过练习,你将更好地掌握 TypeScript 接口的使用方法。