解析 TypeScript 中的函数类型 type vs interface 区别-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，我们有两种方式来定义一个函数类型：使用 type 关键字或使用 interface 关键字。虽然它们都可以用来定义函数类型，但它们之间有一些区别。在本文中，我们将深入探讨这些区别，以便您在编写 TypeScript 代码时能够做出正确的选择。

type 和 interface 的基本语法

首先，让我们看一下 type 和 interface 的基本语法。下面是使用 type 定义函数类型的语法：

type MyFunctionType = (arg1: number, arg2: string) => boolean;

而下面是使用 interface 定义函数类型的语法：

interface MyFunctionInterface {
  (arg1: number, arg2: string): boolean;
}

这两个定义方式都定义了一个函数类型，该函数接受一个数字和一个字符串作为参数，并返回一个布尔值。

type 和 interface 的区别

虽然 type 和 interface 都可以用来定义函数类型，但它们之间有一些区别。下面是一些主要的区别：

1. 可以重复定义 interface，但不能重复定义 type

在 TypeScript 中，我们可以定义多个相同名称的 interface，但是不能定义多个相同名称的 type。例如，下面的代码会报错：

type MyFunctionType = (arg1: number, arg2: string) => boolean;
type MyFunctionType = (arg1: string, arg2: number) => boolean; // Error: Duplicate identifier 'MyFunctionType'.

但是，下面的代码是完全合法的：

interface MyFunctionInterface {
  (arg1: number, arg2: string): boolean;
}
interface MyFunctionInterface {
  (arg1: string, arg2: number): boolean;
}

2. type 可以用于联合类型和交叉类型，但 interface 不能

type 还可以用于联合类型和交叉类型的定义，而 interface 不支持这些类型的定义。例如，下面是一个使用 type 定义联合类型的示例：

type MyUnionType = string | number;

如果我们尝试使用 interface 来定义相同的联合类型，会得到一个编译错误：

interface MyUnionInterface {
  string | number; // Error: Unexpected token. A constructor, method, accessor, or property was expected.
}

3. interface 支持 extend，但 type 不支持

interface 还支持 extend 关键字，这意味着我们可以通过扩展一个 interface 来创建一个新的 interface。例如，下面是一个使用 interface 扩展另一个 interface 的示例：

interface MyBaseInterface {
  foo: number;
}

interface MyExtendedInterface extends MyBaseInterface {
  bar: string;
}

但是，type 不支持 extend 关键字，因此我们不能使用 type 扩展另一个 type。

4. type 支持 typeof，但 interface 不支持

最后，type 支持使用 typeof 关键字来创建一个类型别名，该别名与某个变量的类型相同。例如，下面是一个使用 typeof 创建类型别名的示例：

const myString = 'hello';
type MyStringType = typeof myString;

这将创建一个类型别名 MyStringType，该别名与 myString 变量的类型相同，即 string 类型。但是，interface 不支持 typeof 关键字，因此我们不能使用 interface 创建类型别名。

如何选择 type 和 interface

现在我们已经了解了 type 和 interface 之间的区别，那么在编写 TypeScript 代码时，应该如何选择它们呢？这取决于您的具体需求。

如果您需要定义一个联合类型或交叉类型，或者需要使用 typeof 创建类型别名，那么您应该使用 type。如果您需要定义一个可以被扩展的类型，那么您应该使用 interface。如果您需要定义一个可以重复使用的类型，那么您也应该使用 interface。

示例代码

下面是一些示例代码，用于演示 type 和 interface 之间的区别：

// www.javascriptcn.com code example
// 定义一个使用 type 的函数类型
type MyFunctionType = (arg1: number, arg2: string) => boolean;

// 定义一个使用 interface 的函数类型
interface MyFunctionInterface {
  (arg1: number, arg2: string): boolean;
}

// 定义一个使用 type 的联合类型
type MyUnionType = string | number;

// 尝试定义一个使用 interface 的联合类型（会报错）
interface MyUnionInterface {
  string | number; // Error: Unexpected token. A constructor, method, accessor, or property was expected.
}

// 定义一个使用 interface 的扩展类型
interface MyBaseInterface {
  foo: number;
}

interface MyExtendedInterface extends MyBaseInterface {
  bar: string;
}

// 尝试使用 type 扩展另一个 type（会报错）
type MyBaseType = {
  foo: number;
};

type MyExtendedType extends MyBaseType {
  bar: string; // Error: 'extends' clause of a type alias cannot refer to other type aliases.
}

// 使用 typeof 创建类型别名
const myString = 'hello';
type MyStringType = typeof myString;

希望这篇文章对您有所帮助，让您更好地理解 type 和 interface 之间的区别。

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

解析 TypeScript 中的函数类型 type vs interface 区别