文章目录
- 一、接口的定义
- 二、接口的使用
- 1. 接口的基本定义
- 2. 接口的应用示例
- 3. 可选属性和只读属性
- 4. 函数类型的属性
- 5. 类型推断和索引签名
- 6. 接口的继承
- 三、应用场景
一、接口的定义
接口在 TypeScript 中是一系列抽象方法的声明,它代表了一组方法的特征集合。这些方法都是抽象的,需要由具体的类去实现。接口为这些类型命名,并为代码或第三方代码定义了一种约定,使得第三方可以通过这组抽象方法调用具体的类执行具体的方法。
简而言之,接口描述了一个对象的相关属性和方法,但它本身并不提供创建对象实例的具体方法。
二、接口的使用
1. 接口的基本定义
在 TypeScript 中定义接口的基本语法如下:
interface InterfaceName {
// 属性和方法声明
}
2. 接口的应用示例
假设有一个函数 getUserName
,它接受一个 User
对象并返回该对象的 name
属性。我们可以通过接口来描述 User
对象的结构:
interface User {
name: string;
age: number;
}
const getUserName = (user: User) => user.name;
在这个例子中,传入的对象必须包含 name
和 age
属性,否则 TypeScript 在编译阶段会报错。
3. 可选属性和只读属性
- 可选属性:通过在属性后加上
?
来表示属性是可选的。
interface User {
name: string;
age?: number;
}
- 只读属性:使用
readonly
关键字来声明只读属性。
interface User {
name: string;
age?: number;
readonly isMale: boolean;
}
修改只读属性时,TypeScript 会发出警告。
4. 函数类型的属性
接口也可以描述对象中的函数类型属性:
interface User {
name: string;
age?: number;
readonly isMale: boolean;
say: (words: string) => string;
}
5. 类型推断和索引签名
- 类型推断:可以使用类型断言来指定变量类型。
getUserName({ color: 'yellow' } as User);
- 索引签名:可以通过索引签名来允许接口有额外的属性。
interface User {
name: string;
age: number;
[propName: string]: any;
}
6. 接口的继承
接口可以继承其他接口,使用 extends
关键字来实现。
interface Father {
color: string;
}
interface Mother {
height: number;
}
interface Son extends Father, Mother {
name: string;
age: number;
}
三、应用场景
在 JavaScript 中,定义一个函数来获取用户信息可能会导致运行时错误,特别是在多人开发的情况下。使用 TypeScript 的接口可以避免这种情况:
interface IUser {
name: string;
age: number;
}
const getUserInfo = (user: IUser): string => {
return `name: ${user.name}, age: ${user.age}`;
};
// 正确的调用
getUserInfo({ name: "koala", age: 18 });
接口不仅在函数参数中使用,在类和类的继承中也有广泛的应用。