TypeScript 中使用type与interface定义类型分别有什么区别？

在 TypeScript 中，使用 type 和 interface 都可以用来定义自定义类型，但它们之间存在一些区别：

1. 语法：
   • type使用 type 关键字定义类型别名，后跟自定义类型的名称
   • interface 使用 interface 关键字定义接口，后跟自定义类型的名称
2. 用途：
   • type 主要用于创建类型别名，可以给现有的类型起一个新的名字，包括原始类型、联合类型、交叉类型、函数类型等
   • interface 用于描述对象的形状，包括对象的属性、方法、索引签名等，它更适合用来定义对象的结构
3. 可拓展性：
   • type 具有更大的灵活性，可以合并多个类型声明，也可以使用交叉类型来组合多个类型
   • interface 可以被继承或者拓展其他接口，可以建立更清晰的接口继承关系
4. 约束方式：
   • type 通常用于约束某一种类型，比如给一个复杂的联合类型起一个简单易懂的名称
   • interface 通常用于约束对象的结构，可以描述对象的属性和方法

总的来说，type 与 interface 在很多情况下可以互相替代，但在某些特定的情况下，选择使用其中一个可能更合适。例如，当你需要描述一个对象的结构时，使用 interface 可能更直观；而当你需要定义一个复杂的类型别名时，使用 type 可能更方便。

 

延申：type 与 interface 两者类型复用时的区别

type定义的类型可以通过交叉类型（&）来进行复用，而interface定义的类型则可以通过继承（extends）来实现复用。值得注意的是，type和interface定义的类型也可以互相复用。下面是一些简单的示例：

复用type定义的类型：

type Person = {
  name: string;
  age: number;
};

type Student = Person & {
  major: string;
};

复用interface定义的类型：

interface Person {
  name: string;
  age: number;
};

interface Student extends Person {
  major: string;
}

 interface复用type定义的类型：

type Person = {
  name: string;
  age: number;
};

interface Student extends Person {
  major: string;
}

type复用interface定义的类型：

interface Person {
  name: string;
  age: number;
};

type Student = Person & {
  major: string;
};

 

类型部分复用的情况：

比如我们经常在封装组件时，会定义组件的属性props类型，而有的组件props除少部分属性不一样其他属性都一样，这时候我们想复用之前定义的部分属性类型，例如下面这种代码情况

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 {
  a: string;
  b: string;
  d: string;
}

可以利用TypeScript提供的工具类型Omit来高效地实现这种复用。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Omit<Props, 'c'> {
  d: string;
}

同样，工具类型Pick也可以用于实现此类复用。

interface Props {
  a: string;
  b: string;
  c: string;
}

interface Props1 extends Pick<Props, 'a' | 'b'> {
  d: string;
}

Omit和Pick分别用于排除和选择类型中的属性，具体使用哪一个取决于具体需求。

 

组件属性定义是使用type还是interface？

由于同名接口会自动合并，而同名类型别名会冲突，推荐使用interface定义组件属性。这样，使用者可以通过declare module语句自由扩展组件属性，增强了代码的灵活性和可扩展性。

interface UserInfo {
  name: string;
}
interface UserInfo {
  age: number;
}

const userInfo: UserInfo = { name: "张三", age: 23 };