TypeScript类型复用

注意：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;
}

    interface复用type定义的类型： 

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

interface Coordinate extends Point {
  z: number;
}

     type复用interface定义的类型： 

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

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

注意：在类型复用时，新增属性可以使用工具类型Omit或工具类型Pick更高效的复用方式。 

    使用工具类型Omit复用interface定义的类型

将Props复用，但不需要其中的属性c，重新定义Props1，仅包含Props中的属性a和b，同时添加新属性e。

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

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

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

   使用工具类型Pick复用interface定义的类型

将Props复用，但不需要其中的属性c，重新定义Props1，仅包含Props中的属性a和b，同时添加新属性e。

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

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

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

   定义组件属性时 使用type? 使用interface? 

 注意：由于同名接口会自动合并，而同名类型别名会冲突。推荐使用interface定义组件属性。

使用者可以通过declare module语句自由扩展组件属性，增强了代码的灵活性和可扩展性。

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

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