TS中interface和type的区别

前言

在面试中如果问TS的话，经常会问的一个问题就是interface和type有什么区别，这里做个记录

interface和type的区别

Interface 支持声明合并：如果你有两个相同名称的接口，TypeScript会合并它们

interface User {
  name: string;
}

interface User {
  age: number;
}

// 等同于
interface User {
  name: string;
  age: number;
}

而Type 不支持声明合并。如果你尝试定义两个相同名称的类型别名，TypeScript会报错。

Interface 可以使用extends关键字来继承其他接口

interface Person {
  name: string;
}

interface User extends Person {
  email: string;
}

Type 则不可以，但是也可以使用&运算符来创建交叉类型，从而实现类似的功能

type Person = {
  name: string;
};

type User = Person & {
  email: string;
};

type可以用来定义类型别名

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

也可以用来定义字面量类型

type Color = 'red' | 'green' | 'blue';
type Direction = 'up' | 'down' | 'left' | 'right';

interface不能直接定义字面量类型，但可以通过联合类型来模拟

interface Color {
  value: 'red' | 'green' | 'blue';
}

interface Direction {
  value: 'up' | 'down' | 'left' | 'right';
}

type可以用来定义函数类型，这在创建函数重载时非常有用。

type Add = (a: number, b: number) => number;
type AddString = (a: string, b: string) => string;

function add(a: number, b: number): number {
  return a + b;
}

// 使用函数重载
function add(a: string, b: string): string {
  return a.concat(b);
}

interface不适用于函数重载，因为它们不能定义函数的实现。