TS中的type和interface一些用法

type和interface

1、类型复用

type定义的类型可以通过交叉类型（&）来进行复用，而interface定义的类型则可以通过继承（extends）来实现复用

• type的复用

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

type Coordinate = Point & {
  z: number;
};

• interface的复用

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

interface Coordinate extends Point {
  z: number;
}

2、复用时只会新增属性

• 有原来的属性，只是某一些属性被替换成了别的，例如：
  例如，有一个已有的类型Props需要复用，但不需要其中的属性c。在这种情况下，团队成员会重新定义Props1，仅包含Props中的属性a和b，同时添加新属性e。

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

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

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

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

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

• 工具类型Pick也可以用于实现此类复用

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

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

3、组件属性定义：使用type还是interface

同名接口会自动合并，而同名类型别名会冲突，优先推荐interface

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

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