如何选择你的类型：TypeScript 接口与类型

在使用 Typescript 时，我们曾想过，如果类型和接口的工作原理相同，那为什么还要两个选项呢？为什么我们需要类型或接口，即使其中一个就足够了？
但实际上，即使它们的工作原理相似，它们之间也存在差异。
因此，在这篇博客中，我将解答所有关于类型和接口的疑问。
那么，让我们开始吧。

在 Typescript 中，类型和接口用于定义自定义类型，即对象的形状。

其语法如下：

// Defining a type
type Student = {
  name: string;
  age: number;
};

// Defining an interface
interface Teacher {
  name: string;
  age: number;
}

它们有何不同？

1）接口支持声明合并。声明合并意味着我们可以声明多个具有相同名称的接口，Typescript 会将它们合并为一个接口。

例如：

interface Teacher {
  name: string;
}

interface Teacher {
  age: number;
}
interface Teacher {
  subject: string;
}
const teacher: Teacher = {
  name: "John",
  age: 30,
  subject:"Mathematics"
};

另一方面，我们无法在 Typescript 中合并类型。

2) type 关键字支持计算属性，但接口不支持。

计算属性是什么意思？

计算属性是在 TypeScript 中的对象文字中动态生成属性名称的一种方式。

在 TypeScript 中， type关键字支持计算属性，但interface关键字不支持。这是因为interface是描述对象形状的声明，其属性必须在编译时已知。而type是一种定义自定义类型的方式，它允许更大的灵活性，包括定义计算属性的能力。

以下是在类型定义中使用计算属性的示例：

type Student = {
  name: string;
  age: number;
  [key: string]: unknown; // Computed property
};

const student: Student = {
  name: "John",
  age: 30,
  address: "123 ABC", // Computed property
  phone: "111-111-1111", // Computed property
};

当我们想要存储来自 API 的 key:value 时，类型非常有用，因为我们不确切知道来自 API 响应的 key:vaue，并且将来如果添加或删除新的 key:values，那么我们不必担心将其从代码中删除。

因此我希望这篇博客能够消除有关类型和界面的疑虑。

如果您知道更多有趣的内容，请在评论中分享！