type 与 interface

type

type 是 TypeScript 中的一个关键字，用于定义变量、函数参数、函数返回值等的数据类型。它类似于 JavaScript 中的 typeof 操作符，但提供了更强大的功能，可以定义复杂的数据结构。

type Name = string

interface 是 TypeScript 中的另一个关键字，用于定义对象的结构。它类似于 JavaScript 中的对象类型，但提供了更强大的功能，可以定义复杂的数据结构。

interface Name {
  name: string
}

interface 可以声明合并，而 type 不能声明合并。

interface Name {
  name: string
}

interface Name {
  age: number
}

const name: Name = {
  name: "张三",
  age: 18
}

interface 可以提供更好的错误提示，而 type 不能提供更好的错误提示。

interface 在类型检查错误时通常会给出更清晰的错误信息，特别是在处理对象类型时，interface 的错误提示往往更易读。

举例：截图代补充

interface 更符合面向对象编程的思维方式，在描述组件 props 这种对象结构时，使用 interface 更符合直觉。

interface Props {
  formModel: FormModel
  nextStep: () => void
  enterpriseId: string
  toPath: (path: string) => void
}

这两种写法在功能上没有任何区别。选择 interface 更多是一种编码风格的选择，特别是在 Vue 组件中描述 props 类型时，使用 interface 是一种比较常见的实践。

扩展性
- interface 支持声明合并和扩展（extends），适合用于描述公共接口和大型项目中的接口设计。
- type 通过交叉类型（&）和联合类型（|）提供更灵活的类型组合方式。
泛型支持
- interface 支持泛型，适合定义具有可变部分的接口。
```
interface GenericInterface<T> {
  value: T
  getValue(): T
}
```
- type 也支持泛型，并且可以定义更复杂的类型，如条件类型和映射类型。
```
type GenericType<T> = {
  value: T
  getValue(): T
}

type StringOrNumber<T> = T extends string | number ? T : never
```
  type 在泛型方面比 interface 更加灵活，能够处理基本类型、联合类型、条件类型等。

功能覆盖

type 可以定义基本类型、联合类型、交叉类型、元组等，而 interface 主要用于定义对象的结构。

// 联合类型
type ID = string | number

// 交叉类型
type Animal = { name: string } & { age: number }

// 元组
type Point = [number, number]

// interface 只能定义对象结构
interface Person {
  name: string
  age: number
}

使用场景
- interface 适用于需要定义对象结构并可能需要扩展的场景，如组件的 props。
- type 适用于需要定义复杂类型组合或对现有类型进行别名的场景，如联合类型和交叉类型。