如何在TypeScript中动态扩展对象的接口或类型？

Question

我试图使用贝宝的魅力CSS- in -JS库在一个样板项目，我正在建设，它也利用TypeScript。

Glamorous允许您为元素添加道具，如-so：

const Section = glamorous.section([
  {
    ...styles
  },
  ({size}: any){
    if(size === 'big') return {fontSize: '48px';}
    else if(size === 'small') return {fontSize: '12px';}
  },
  ({alignment}: any){
    if(alignment === 'left') return {textAlign: 'left'}
    else if(alignment === 'right') return {textAlign: 'right'}
  }
]);

这样您就可以像这样使用JSX中的元素：

<Section size="big"></Section>

我有许多这样的道具，我想把它们添加到我所有魅力生成的元素中。因此，我创建了一个助手函数，如下所示：

export const special = (glam: any, styles: object[]): GBPComp =>{
  return glam([styles as CSSStyleDeclaration[], specialProps]);
};

其中specialProps表示一个函数(类似于上面的函数)，它将各种属性添加到我的样式声明数组中。

我打算这样使用它：

const Section = special(glamorous.section, [
  {
    ...styles
  }
]);

然后，我希望为我的JSX使用键入specialProps提供的所有属性。所以，我尝试这样创建我的GBPComp类型：

export type GBPComp = React.StatelessComponent<CSSProperties&ExtraGlamorousProps&React.HTMLProps<HTMLElement>&{
  layout?: string,
  width?: string
}>;

出现这个问题的原因是，并不是所有返回的元素都必须具有React.HTMLProps<HTMLElement>属性。它们可以是HTMLAnchorElement或HTMLTableElement等。

我如何能够动态地生成我的GBPComp类型，以便它将这些属性(即layout和width)添加到所有返回的类型中？以使以下内容在TypeScript中正常工作：

const Section = special(glamorous.section, [
  {
    ...styles
  }
]);

const Anchor = special(glamorous.a, [
  {
    ...styles
  }
]);

<a href="#" layout="someString">This is an Anchor</a>

<section layout="someString">This is a Section</section>

Answer 1

如果您不想让每个元素都使用React.HTMLProps<HTMLElement>，而不是对React.HTMLProps<HTMLElement>进行硬编码，那么可以对GBPComp使用泛型，如下所示

export type GBPComp<ExtraProps> = React.StatelessComponent<React.CSSProperties & ExtraGlamorousProps & ExtraProps & { 
  layout: string,
  width: string
}>;

special()也接受ExtraProps作为泛型，并像这样传递给GBPComp

export function special<ExtraProps>(glam: any, styles: object[], ...specialProps): GBPComp<ExtraProps> {
  return glam([styles as CSSStyleDeclaration[], ...specialProps]);
};

现在你可以给你的Anchor分配React.HTMLProps<HTMLAnchorElement>属性了

const Anchor = special<React.HTMLProps<HTMLAnchorElement>>(glamorous.a, [
  {
    ...styles
  }
]);