TypeScript 中的接口实现详解-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要使用接口实现对象之间的约束关系以及数据的格式定义。TypeScript 作为一门带有类型系统的 JavaScript 超集，其接口实现的使用方式也相比 JavaScript 更为规范和强约束。学习 TypeScript 中的接口实现，有助于提高编码质量和代码可读性。本文将介绍 TypeScript 中接口实现的基本概念以及使用方式，带有详细的示例代码和实际应用场景的解析，以及一些实践中需要注意的细节。

什么是接口（Interface）

接口是一种抽象的定义方式，是约定、规范的实现方式。它可以用来定义对象、函数、类的形状和行为。在 TypeScript 中，我们可以通过接口来定义数据格式、函数签名等，类似于 Java 中的接口定义。一个接口不会真正实现任何逻辑，它只是一个外部的约束，在开发过程中需要遵守其定义。

定义接口

接口通常使用关键字 interface 来定义。接口的名称一般使用大写驼峰式命名（第一个单词的首字母大写），约定接口名称代表该接口规范所表达的意义。

例如下面一个定义了两个属性字段的接口 Person：

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

使用接口

通过定义接口，可以在代码中使用对该接口的引用，以达到对其约束的目的。例如：

function printPersonInfo(p: Person) {
    console.log(`name: ${p.name}, age: ${p.age}`);
}

const person1 = { name: '张三', age: 25 };
printPersonInfo(person1);

在这个例子中，我们定义了一个 printPersonInfo 的函数，该函数接受一个 Person 类型的参数 p，并打印该对象的属性值。接着我们定义了一个常量 person1，其属性符合接口 Person 的定义，并将其作为参数传递给函数 printPersonInfo，输出 name: 张三, age: 25 的结果。

需要注意的是，只要传递给 printPersonInfo 函数的对象符合 Person 接口的定义，即使该对象包含了其它字段，也不会报错。因为 TypeScript 中的接口是鸭式辨型（duck typing），只要对象的属性名称和类型与接口定义一致，就被认为是符合该接口的定义。

可选属性

有些情况下，接口中的属性可能是可选的，即在对象中可以存在也可以不存在。在 TypeScript 中，我们可以使用 ? 表示该属性为可选属性。例如，将上面的 Person 接口重新定义为可选属性如下：

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

这样，我们在定义 Person 类型的对象时，就可以选择如下两种方式：

const person1 = { name: '张三' };
const person2 = { name: '李四', age: 30 };

在第一个对象中，并没有 age 属性，但是由于 age 属性是可选的，因此不会报错。而在第二个对象中，age 属性被正确传递，并被函数正确处理。

只读属性

有些接口的属性需要在对象被创建时就被设置，并且不应该被修改。在 TypeScript 中，我们可以使用 readonly 关键字来定义只读属性。例如，下面定义了一个 Point 接口：

interface Point {
    readonly x: number;
    readonly y: number;
}

该接口定义了一个 x 和一个 y 属性，均为只读属性，一旦被初始化，就无法修改。我们可以实例化一个符合 Point 规范的对象，并仅仅能读取其属性，而不能修改其属性：

let p1: Point = { x: 10, y: 20 };
console.log(p1.x, p1.y);

p1.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

函数类型接口

接口除了可以定义对象的形状和约束，还可以定义函数的签名和约束。此时，接口的函数体并不会真正实现任何逻辑，而是只告诉开发者该函数应该什么样，需要传递什么样的参数或返回什么样的值。

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

该接口定义了一个函数签名，其接受两个 string 类型的参数，分别标识源字符串和查询子字符串，返回值为布尔类型。我们可以实现上述的 SearchFunc 接口：

const searchFunc: SearchFunc = function(source: string, substring: string) {
    return source.indexOf(substring) !== -1;
};

上述实现了一个字符串匹配函数，判断子字符串 substring 是否存在于源字符串 source 中。函数功能的实现不在本节的讲解范围内，需要了解其它知识点。

索引类型接口

在某些场景下，我们可能需要可索引的数据类型，如数组和键值对（字典）。在 TypeScript 中，我们可以使用索引类型接口，来规范该数据类型的行为。例如，定义一个字符串数组类型，要求数组的索引为数值类型，元素为字符串类型：

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray = ['a', 'b', 'c'];

如上述例子，[index: number]: string; 定义了索引类型为数值类型，而元素必须为字符串类型的数组类型，因此 myArray 符合该类型的定义。

我们也可以用它来表示具有任意属性的对象的类型。例如，定义一个名为 Dictionary 的接口：

interface Dictionary {
  [key: string]: string;
}

该接口定义了一个索引签名，索引类型为字符串类型，对应的值也为字符串类型。它就可以用来表示任意键值对的形状：

let dict: Dictionary = { key1: "value1", key2: "value2" };

注意，此时参数 key 不需要使用字符串索引访问（例如 dict["key1"]）。

实际应用

了解了 TypeScript 中的接口的基本原理和语法后，接下来给出一些实际应用场景，例如：

需要传递数据的组件

对于那些需要被传递数据的组件，可以使用接口规范其传参的类型。例如，定义一个 User 组件，其需要从父组件中传递一个符合 User 接口定义的数据对象：

-- -------------------- ---- -------
--------- ---- -
    --- -------
    ----- -------
    ---- -------
    ------ -------
  -
  
--------- --------- -
    ----- -----
  -
  
-------- -------------------- ---------- -
    ----- - ---- - - ------
    ------ -
      -----
        --------------------
        --------------------
        ----------------------
      ------
    --
-

通过使用接口 UserProps 来约束该组件接受到的 props 数据类型，使得该组件可以更好地维护和使用。

网络请求返回数据的处理

在进行网络请求时，最好在自己的代码中对接口中的字段进行描述，有清晰的认识有助于代码的可维护性。例如，假设服务器会返回一个 JSON 数据：

-- -------------------- ---- -------
-
    ------- --
    ---------- ----------
    ------- -
        ----- --
        ------- -----
        ------ ---
        -------- ------------------
    -
-

我们可以将该 JSON 数据对应的接口定义为：

-- -------------------- ---- -------
--------- -------------- -
    ----- -------
    -------- -------
    ----- --
-

--------- ---- -
    --- -------
    ----- -------
    ---- -------
    ------ -------
-

其中 ApiResponse 定义了返回数据的规范格式，包含了一个 code、一个 message 和一个 data 字段，T 表示 data 字段的类型参数，即上述的 User 接口。这样，当我们的程序收到返回数据时，我们可以使用 ApiResponse<User> 类型来描述该数据的类型：

const fetchUser = async (): Promise<User> => {
    try {
        const { data: response } = await axios.get<ApiResponse<User>>('/api/user/1');
        return response.data;
    } catch (error) {
        throw new Error('获取用户信息失败');
    }
};

这样的话，我们就可以保证返回的数据类型一定符合规范，并且可以避免在数据访问时出现意外错误。

总结

本文详细介绍了 TypeScript 中接口的基础语法和使用方式，包括如何定义和使用接口，可选属性和只读属性的使用方法以及函数类型和索引类型的接口定义。并结合实例场景给出了实际应用的示例代码。类型约束可以帮助我们开发出更易维护、清晰易懂的代码，在项目开发过程中提高效率、降低各种错误发生的概率。因此，虽然学习 TypeScript 中的接口需要花费较多的时间来学习，但是它对于一个成熟的前端开发工程师来说是必不可少的。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6484341248841e9894359508