打字稿:接口与类型

Question

这些语句(接口与类型)之间有什么区别？

interface X {
    a: number
    b: string
}

type X = {
    a: number
    b: string
};

Answer 1

根据TypeScript语言规范:

与始终引入命名对象类型的接口声明不同,类型别名声明可以为任何类型的类型引入名称,包括基元,联合和交集类型.

规范接着提到:

接口类型与对象类型文字的类型别名有很多相似之处,但由于接口类型提供了更多功能,因此通常首选键入别名.例如,接口类型

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

可以写为类型别名

type Point = {
    x: number;
    y: number;
};

但是,这样做意味着丢失了以下功能:

• 接口可以在extends或implements子句中命名,但是对象类型文字的类型别名不能.
• 接口可以有多个合并声明,但对象类型文字的类型别名不能.

Answer 2

2019年更新

目前的答案和官方文件已经过时.对于那些刚接触TypeScript的人来说,如果没有示例,使用的术语就不清楚了.以下是最新差异列表.

1.对象/功能

两者都可用于描述对象的形状或函数签名.但语法不同.

接口

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

interface SetPoint {
  (x: number, y: number): void;
}

输入别名

type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

2.其他类型

与接口不同,类型别名也可用于其他类型,例如基元,联合和元组.

// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

3.延伸

两者都可以扩展,但同样,语法也不同.另外,请注意,接口和类型别名不是互斥的.接口可以扩展类型别名,反之亦然.

接口扩展接口

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }

类型别名扩展类型别名

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

接口扩展类型别名

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

类型别名扩展接口

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

4.实施

类可以以相同的方式实现接口或类型别名.但请注意,类和接口被视为静态蓝图.因此,它们无法实现/扩展名为联合类型的类型别名.

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

class SomePoint implements Point {
  x: 1;
  y: 2;
}

type Point2 = {
  x: number;
  y: number;
};

class SomePoint2 implements Point2 {
  x: 1;
  y: 2;
}

type PartialPoint = { x: number; } | { y: number; };

// FIXME: can not implement a union type
class SomePartialPoint implements PartialPoint {
  x: 1;
  y: 2;
}

5.宣言合并

与类型别名不同,接口可以多次定义,并将被视为单个接口(所有声明的成员都被合并).

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };

Answer 3

2021年相关

对于typescrpt版本：4.3.4

TLDR；

我的个人惯例，我在下面描述，是这样的：

总是喜欢interface超过type。

何时使用type：

• type在为原始类型（字符串、布尔值、数字、bigint、符号等）定义别名时使用
• type定义元组类型时使用
• type定义函数类型时使用
• type定义联合时使用
• type在尝试通过组合重载对象类型中的函数时使用
• 使用type需要采取映射类型的优势，当

何时使用interface：

• interface用于type不需要使用的所有对象类型（见上文）
• 使用interface时要采取申报合并的advatange。

原始类型

type和之间最容易看到的区别interface是只能type用于为原语别名：

type Nullish = null | undefined;
type Fruit = 'apple' | 'pear' | 'orange';
type Num = number | bigint;

这些示例都无法通过接口实现。

为原始值提供类型别名时，请使用type关键字。

元组类型

元组只能通过type关键字输入：

type row = [colOne: number, colTwo: string];

在type为元组提供类型时使用关键字。

函数类型

函数可以通过type和interface关键字输入：

// via type
type Sum = (x: number, y: number) => number;

// via interface
interface Sum {
  (x: number, y: number): number;
}

由于可以通过任何一种方式实现相同的效果，因此规则将type在这些场景中使用，因为它更容易阅读（并且不那么冗长）。

type在定义函数类型时使用。

联合类型

联合类型只能通过type关键字实现：

type Fruit = 'apple' | 'pear' | 'orange';
type Vegetable = 'broccoli' | 'carrot' | 'lettuce';

// 'apple' | 'pear' | 'orange' | 'broccoli' | 'carrot' | 'lettuce';
type HealthyFoods = Fruit | Vegetable;

定义联合类型时，使用type关键字

对象类型

javascript 中的对象是键/值映射，而“对象类型”是打字稿键入这些键/值映射的方式。二者interface并type可以为对象提供类型时作为原始问题明确使用。那么什么时候对对象类型使用typevsinterface呢？

交叉与继承

使用类型和组合，我可以做这样的事情：

interface NumLogger { 
    log: (val: number) => void;
}
type StrAndNumLogger = NumLogger & { 
  log: (val: string) => void;
}

const logger: StrAndNumLogger = {
  log: (val: string | number) => console.log(val)
}

logger.log(1)
logger.log('hi')

打字稿非常高兴。如果我尝试使用接口扩展它呢：

interface StrAndNumLogger extends NumLogger { 
    log: (val: string) => void; 
};

的声明StrAndNumLogger给了我一个错误：

Interface 'StrAndNumLogger' incorrectly extends interface 'NumLogger'

对于接口，子类型必须与超类型中声明的类型完全匹配，否则 TS 将抛出类似上面的错误。

当尝试重载对象类型中的函数时，最好使用type关键字。

声明合并

打字稿中的接口将它们与类型区分开来的关键方面是它们可以在声明之后使用新功能进行扩展。当您想要扩展从节点模块导出的类型时，会出现此功能的常见用例。例如，@types/jest导出在使用 jest 库时可以使用的类型。但是，jest 还允许jest使用新功能扩展主类型。例如，我可以添加这样的自定义测试：

jest.timedTest = async (testName, wrappedTest, timeout) =>
  test(
    testName,
    async () => {
      const start = Date.now();
      await wrappedTest(mockTrack);
      const end = Date.now();

      console.log(`elapsed time in ms: ${end - start}`);
    },
    timeout
  );

然后我可以像这样使用它：

test.timedTest('this is my custom test', () => {
  expect(true).toBe(true);
});

现在，一旦测试完成，该测试所用的时间将打印到控制台。伟大的！只有一个问题 - typescript 不知道我添加了一个timedTest函数，所以它会在编辑器中抛出一个错误（代码运行良好，但 TS 会生气）。

为了解决这个问题，我需要告诉 TS 在 jest 已经可用的现有类型之上有一个新类型。为此，我可以这样做：

declare namespace jest {
  interface It {
    timedTest: (name: string, fn: (mockTrack: Mock) => any, timeout?: number) => void;
  }
}

由于接口是如何工作的，这种类型的声明将被合并与导出的类型声明@types/jest。所以我不只是重新声明jest.It; 我扩展jest.It了一个新函数，以便 TS 现在知道我的自定义测试函数。

这种类型的事情是不可能的type关键字。如果@types/jest使用type关键字声明它们的类型，我将无法使用我自己的自定义类型扩展这些类型，因此没有什么好方法让 TS 对我的新函数感到满意。这个interface关键字独有的过程称为声明合并。

声明合并也可以像这样在本地进行：

interface Person {
  name: string;
}

interface Person {
  age: number;
}

// no error
const person: Person = {
  name: 'Mark',
  age: 25
};

如果我对type关键字做了完全相同的事情，我会得到一个错误，因为类型不能被重新声明/合并。在现实世界中，javascript 对象很像这个interface例子；它们可以在运行时使用新字段动态更新。

因为接口声明可以合并，接口比类型更准确地表示 javascript 对象的动态特性，因此它们应该是首选。

映射对象类型

使用type关键字，我可以利用这样的映射类型：

type Fruit = 'apple' | 'orange' | 'banana';

type FruitCount = {
  [key in Fruit]: number;
}

const fruits: FruitCount = {
  apple: 2,
  orange: 3,
  banana: 4
};

这不能通过接口完成：

type Fruit = 'apple' | 'orange' | 'banana';

// ERROR: 
interface FruitCount {
  [key in Fruit]: number;
}

当需要利用映射类型时，使用type关键字

表现

大多数时候，对象类型的简单类型别名的作用与接口非常相似。

interface Foo { prop: string }

type Bar = { prop: string };

但是，一旦您需要组合两个或多个类型，您就可以选择使用接口扩展这些类型，或者将它们交叉在一个类型别名中，这就是差异开始重要的时候。

接口创建一个单一的平面对象类型来检测属性冲突，这通常很重要！另一方面，交叉点只是递归地合并属性，在某些情况下永远不会产生。界面也始终显示得更好，而交叉点的类型别名不能在其他交叉点的一部分中显示。接口之间的类型关系也被缓存，而不是作为一个整体的交集类型。最后一个值得注意的区别是，在检查目标交叉点类型时，在检查“有效”/“扁平”类型之前检查每个成分。

出于这个原因，建议使用接口/扩展扩展类型而不是创建交叉类型。

更多关于打字稿维基。

Answer 4

什么时候使用type？

通用转换

使用type时，您要变换多个类型为单个通用型。

例子：

type Nullable<T> = T | null | undefined
type NonNull<T> = T extends (null | undefined) ? never : T

类型别名

我们可以使用type为难以阅读且不方便反复键入的长类型或复杂类型创建别名。

例子：

type Primitive = number | string | boolean | null | undefined

创建这样的别名可以使代码更加简洁和可读。

类型捕获

type当类型未知时，使用来捕获对象的类型。

例子：

const orange = { color: "Orange", vitamin: "C"}
type Fruit = typeof orange
let apple: Fruit

在这里，我们获取 的未知类型orange，将其命名为 a Fruit，然后使用Fruit来创建新的类型安全对象apple。

什么时候使用interface？

多态性

Aninterface是实现数据形状的合同。使用接口明确表示它旨在实现并用作关于如何使用对象的合同。

例子：

interface Bird {
    size: number
    fly(): void
    sleep(): void
}

class Hummingbird implements Bird { ... }
class Bellbird implements Bird { ... }

尽管您可以使用type来实现这一点，但 Typescript 更像是一种面向对象的语言，并且在面向对象的语言interface中占有特殊的地位。interface当您在团队环境中工作或为开源社区做出贡献时，更容易阅读代码。对于来自其他面向对象语言的新程序员来说，这也很容易。

官方 Typescript文档还说：

......我们建议使用interface在type可能的情况下别名。

这也表明type更倾向于创建类型别名而不是创建类型本身。

声明合并

您可以使用 的声明合并功能interface将新属性和方法添加到已声明的interface. 这对于第三方库的环境类型声明很有用。当第三方库缺少某些声明时，您可以使用相同的名称再次声明接口并添加新的属性和方法。

例子：

我们可以扩展上述Bird接口以包含新的声明。

interface Bird {
    color: string
    eat(): void
}

就是这样！记住何时使用什么比在两者之间的细微差别中迷失更容易。

Answer 5

从TypeScript 3.2开始,以下情况属实:

Answer 6

2024 年更新 -

类型别名和接口非常相似，在许多情况下您可以在它们之间自由选择。接口的几乎所有功能都可以在类型中使用，主要区别在于类型不能重新打开以添加新属性，而接口始终是可扩展的。

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences- Between-type-aliases-and-interfaces

Answer 7

https://www.typescriptlang.org/docs/handbook/advanced-types.html

一个区别是接口创建一个在任何地方使用的新名称.类型别名不会创建新名称 - 例如,错误消息将不使用别名.

Answer 8

类型示例：

// 为一个对象创建一个树结构。由于缺少交集 (&)，您不能对界面做同样的事情

type Tree<T> = T & { parent: Tree<T> };

// type 限制一个变量只能分配几个值。接口没有联合 (|)

type Choise = "A" | "B" | "C";

// 由于类型，您可以通过条件机制声明 NonNullable 类型。

type NonNullable<T> = T extends null | undefined ? never : T;

接口示例：

// 您可以使用 OOP 接口并使用“实现”来定义对象/类骨架

interface IUser {
    user: string;
    password: string;
    login: (user: string, password: string) => boolean;
}

class User implements IUser {
    user = "user1"
    password = "password1"

    login(user: string, password: string) {
        return (user == user && password == password)
    }
}

// 你可以用其他接口扩展接口

    interface IMyObject {
        label: string,
    }

    interface IMyObjectWithSize extends IMyObject{
        size?: number
    }

Answer 9

索引的差异。

interface MyInterface {
  foobar: string;
}

type MyType = {
  foobar: string;
}

const exampleInterface: MyInterface = { foobar: 'hello world' };
const exampleType: MyType = { foobar: 'hello world' };

let record: Record<string, string> = {};

record = exampleType;      // Compiles
record = exampleInterface; // Index signature is missing

相关问题：类型中缺少索引签名（仅在接口上，不在类型别名上）

因此，如果您想为对象建立索引，请考虑这个示例

看看这个问题和这个关于违反里氏原则的问题

评价差异

ExtendFirst查看when FirstLevelTypeis接口的结果类型

/**
 * When FirstLevelType is interface 
 */

interface FirstLevelType<A, Z> {
    _: "typeCheck";
};

type TestWrapperType<T, U> = FirstLevelType<T, U>;


const a: TestWrapperType<{ cat: string }, { dog: number }> = {
  _: "typeCheck",
};

// {  cat: string; }
type ExtendFirst = typeof a extends FirstLevelType<infer T, infer _>
    ? T
    : "not extended";

ExtendFirst查看when FirstLevelTypeis a type的结果类型：

/**
 * When FirstLevelType is type
 */
type FirstLevelType<A, Z>= {
    _: "typeCheck";
};

type TestWrapperType<T, U> = FirstLevelType<T, U>;


const a: TestWrapperType<{ cat: string }, { dog: number }> = {
  _: "typeCheck",
};

// unknown
type ExtendFirst = typeof a extends FirstLevelType<infer T, infer _>
    ? T
    : "not extended";

Answer 10

文档中指出的主要区别是Interface可以重新打开以添加新属性，但Type alias不能重新打开以添加新属性，例如：

还行吧

interface x {
  name: string
}

interface x {
  age: number
}

这会抛出错误Duplicate identifier y

type y = {
  name: string
}

type y = {
  age: number
}

除此之外，接口和类型别名都很相似。

Answer 11

在打字稿中，建议使用“接口”而不是“类型”。

\n

\n

• “类型”用于创建type aliases。你不能用“接口”来做到这一点。

  \n

   type Data=string\n

  \n

  然后您可以使用“Data”而不是使用字符串

  \n

  const name:string="Yilmaz"\nconst name:Data="Yilmaz"\n

  \n
\n

\n

别名非常有用，尤其是在处理泛型类型时。

\n

\n

• Declaration Merging:您可以合并接口，但不能合并类型。

  \n

  interface Person {\n    name: string;\n  }\n\n  interface Person {\n    age: number;\n  }\n  // we have to provide properties in both Person\n  const me: Person = {\n    name: "Yilmaz",\n    age: 30\n  };\n

  \n
\n

• 函数式编程用户使用“类型”，面向对象编程用户选择“接口”

  \n
\n

• 您可以\xe2\x80\x99t 在接口上但在类型中计算或计算属性。

  \n

   type Fullname = "firstname" | "lastname"\n\n  type  Person= {\n     [key in Fullname]: string\n  }\n\n  const me: Person = {\n     firstname: "Yilmaz",\n     lastname: "Bingol"\n  }\n

  \n
\n

\n

Answer 12

在我的日常开发中，当我不知道该选择哪个时，我会使用这个备忘单。

欲了解更多信息，您可以阅读我的博客：https://medium.com/@magenta2127/use-which-interface-or-type-alias-in-typescript-bdfaf2e882ae

Answer 13

除了已经提供的出色答案之外，在扩展类型与接口方面还存在明显的差异。我最近遇到了一些界面无法完成这项工作的情况：

1. 无法使用接口扩展联合类型
2. 无法扩展通用接口

Answer 14

其他答案都很棒！很少有其他Type可以做但Interface不能做的事情

您可以在类型中使用 union

type Name = string | { FullName: string };

const myName = "Jon"; // works fine

const myFullName: Name = {
  FullName: "Jon Doe", //also works fine
};

迭代类型中的联合属性

type Keys = "firstName" | "lastName";

type Name = {
  [key in Keys]: string;
};

const myName: Name = {
  firstName: "jon",
  lastName: "doe",
};

类型中的交集（但是，Interface with 中也支持extends）

type Name = {
  firstName: string;
  lastName: string;
};

type Address = {
  city: string;
};

const person: Name & Address = {
  firstName: "jon",
  lastName: "doe",
  city: "scranton",
};

也不type是后来引入的interface，根据最新版本的 TStype可以做*几乎所有可以做的事情，interface还有更多！

*除了Declaration merging（个人意见：不支持类型是好的，因为它可能导致代码不一致）

Answer 15

接口与类型

接口和类型用于描述对象和基元的类型。接口和类型通常可以互换使用，并且通常提供类似的功能。通常是程序员根据自己的喜好进行选择。

然而，接口只能描述对象和创建这些对象的类。因此，必须使用类型来描述字符串和数字等基元。

以下是接口和类型之间的 2 个差异的示例：

// 1. Declaration merging (interface only)

// This is an extern dependency which we import an object of
interface externDependency { x: number, y: number; }
// When we import it, we might want to extend the interface, e.g. z:number
// We can use declaration merging to define the interface multiple times
// The declarations will be merged and become a single interface
interface externDependency { z: number; }
const dependency: externDependency = {x:1, y:2, z:3}

// 2. union types with primitives (type only)

type foo = {x:number}
type bar = { y: number }
type baz = string | boolean;

type foobarbaz = foo | bar | baz; // either foo, bar, or baz type

// instances of type foobarbaz can be objects (foo, bar) or primitives (baz)
const instance1: foobarbaz = {y:1} 
const instance2: foobarbaz = {x:1} 
const instance3: foobarbaz = true 

Answer 16

Typescript 手册给出了答案：关键区别在于，不能重新打开类型以添加​​新属性与始终可扩展的接口。

链接：https : //www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases