TypeScript 中接口的理解与应用场景

全栈若城

发布于 2024-10-11 09:18:06

18300

代码可运行

文章被收录于专栏：若城技术专栏若城技术专栏

运行总次数：0

代码可运行

一、接口的定义

接口在 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 });

接口不仅在函数参数中使用，在类和类的继承中也有广泛的应用。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除

对象