TypeScript 接口
介绍
在 TypeScript 中,接口(Interface) 是一种强大的工具,用于定义对象的结构。通过接口,你可以明确指定对象应该包含哪些属性、方法以及它们的类型。接口的主要作用是确保代码中的对象符合预期的结构,从而提高代码的可读性和可维护性。
接口是 TypeScript 类型系统的核心部分,它们不仅可以帮助你在开发过程中捕获潜在的错误,还能为你的代码提供清晰的文档。
基本语法
定义一个接口非常简单。使用 interface
关键字,后跟接口的名称和一对大括号 {}
,在大括号中定义对象的属性和方法。
interface Person {
name: string;
age: number;
}
在这个例子中,我们定义了一个名为 Person
的接口,它要求对象必须包含 name
和 age
两个属性,且它们的类型分别为 string
和 number
。
使用接口
定义好接口后,你可以用它来约束对象的类型:
const user: Person = {
name: "Alice",
age: 25,
};
如果你尝试创建一个不符合接口定义的对象,TypeScript 会报错:
const invalidUser: Person = {
name: "Bob",
// 缺少 age 属性
};
注意:如果对象缺少接口中定义的属性,或者属性的类型不匹配,TypeScript 会抛出错误。
可选属性
有时,你可能希望某些属性是可选的。在接口中,你可以通过在属性名后添加 ?
来标记可选属性:
interface Person {
name: string;
age?: number; // age 是可选的
}
现在,age
属性不再是必需的:
const user: Person = {
name: "Alice",
};
只读属性
如果你希望某些属性在对象创建后不能被修改,可以使用 readonly
关键字:
interface Person {
readonly id: number;
name: string;
age?: number;
}
一旦 id
被赋值,就不能再修改:
const user: Person = {
id: 1,
name: "Alice",
};
user.id = 2; // 错误:无法分配到 "id",因为它是只读属性
函数类型
接口不仅可以描述对象的属性,还可以描述函数的结构。例如,你可以定义一个函数接口:
interface SearchFunc {
(source: string, subString: string): boolean;
}
然后,你可以使用这个接口来约束函数的类型:
const mySearch: SearchFunc = function (source, subString) {
return source.includes(subString);
};
接口的继承
接口可以通过 extends
关键字继承其他接口。这使得你可以复用已有的接口定义,并在此基础上扩展新的属性或方法。
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
}
const myDog: Dog = {
name: "Buddy",
breed: "Golden Retriever",
};
在这个例子中,Dog
接口继承了 Animal
接口的所有属性,并添加了一个新的 breed
属性。
实际应用场景
1. API 响应数据的类型定义
在与后端 API 交互时,接口可以帮助你定义响应数据的结构。例如:
interface ApiResponse {
status: number;
data: {
id: number;
name: string;
email: string;
};
}
2. 组件 Props 的类型定义
在 React 等前端框架中,接口常用于定义组件的 Props 类型:
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 接口是定义对象结构的有力工具。通过接口,你可以确保对象符合预期的类型,从而提高代码的健壮性和可维护性。无论是定义简单的对象结构,还是描述复杂的函数类型,接口都能为你提供清晰的类型约束。
建议:在实际开发中,尽量使用接口来定义对象的类型,这样可以让代码更加清晰和易于维护。
附加资源
练习
- 定义一个接口
Car
,包含brand
、model
和year
三个属性。 - 创建一个函数接口
Calculator
,包含add
和subtract
两个方法。 - 使用接口继承,定义一个
ElectricCar
接口,继承自Car
,并添加batteryLife
属性。
通过练习,你将更好地掌握 TypeScript 接口的使用方法。