typescript 如何实现展开类型组成新的类型？

Question

const font: Font = {
  color: "red",
  size: 16,
};
const background: Background = {
  color: "red",
  url: "",
};
const style:Style = {
  ...font,
  ...background,
};

//----------------------//

type Font = {
  color: string;
  size: number;
};
type Background = {
  color: string;
  url: string;
};
interface Style {
  // Font
  // Background
}

请问上面这个小例子里面 style 类型应该怎么写呀，查了下感觉姿势不对没查到……

Answer 1

1. 接口继承实现

// --- this --- 
interface Style {
}

interface Font extends Style {
  color: string;
  size: number;
}
interface Background extends Style {
  color: string;
  url: string;
}

const font: Font = {
  color: 'red',
  size: 16,
};
const background: Background = {
  color: 'red',
  url: '',
};

const style: Style = {
  ...font,
  ...background,
};

2. 交叉类型

type Font = {
  color: string;
  size: number;
};
type Background = {
  color: string;
  url: string;
};

// ---- this -----
type Style = Font & Background;

const font: Font = {
  color: 'red',
  size: 16,
};
const background: Background = {
  color: 'red',
  url: '',
};
const style: Style = {
  ...font,
  ...background,
};