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

什么是 TypeScript 接口？

TypeScript 是一种静态类型的编程语言，具有类型推断和类型注释的功能。在 TypeScript 中，接口是用来描述对象的形状的结构类型，可以用来描述对象的属性、方法等信息。

TypeScript 接口使用 interface 关键字来定义，其基本语法如下：

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

其中，InterfaceName 表示接口的名称，而 { ... } 中则表示该接口所包含的属性和方法的定义。例如，下面是一个简单的 TypeScript 接口示例：

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

该接口名为 Person，包含了名字、年龄和打招呼的方法。其中，name 属性的类型为字符串，age 属性的类型为数字，sayHello 方法没有返回值。

在 TypeScript 接口中，可以使用 ? 来表示一个属性是可选的，例如：

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

上述示例中，age 属性被标记为可选属性，即只有当它存在时才需要符合类型检查。

在 TypeScript 接口中，可以使用 readonly 关键字来表示一个属性是只读的，例如：

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

上述示例中，id 属性被标记为只读属性，即不能在对象创建后更改该属性的值。

在 TypeScript 接口中，可以使用索引类型来描述对象中任意属性的类型，例如：

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

上述示例中，[propName: string] 表示该接口可以包含任意属性，属性名为字符串类型，而属性值的类型为 any。

在 TypeScript 接口中，可以使用函数类型来描述函数的形状，例如：

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

上述示例中，SearchFunc 表示一个函数类型，它接收两个字符串类型的参数 source 和 subString，并返回布尔值。

TypeScript 接口最常用的应用场景之一就是描述对象的形状，例如：

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

上述示例中，Person 接口描述了一个人的基本信息，包括名字和年龄。这样，我们可以在代码中使用该接口来定义一个符合要求的对象：

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

在 TypeScript 中，函数的形参和返回值也可以使用接口来进行类型定义，例如：

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

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

上述示例中，AddFunc 接口表示一个求和函数，它接收两个数字类型的参数 a 和 b，并返回它们的和。

在设计 TypeScript 接口时，应该遵循单一职责原则，即每个接口只描述一个对象或功能。这样可以使接口更加清晰、灵活，并且方便代码维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/3416