javascript - 如何在 TypeScript 中动态扩展对象的接口(interface)或类型？

Question

我正在尝试在我正在构建的样板项目中使用 PayPal 的 Glamorous CSS-in-JS 库，该项目也利用了 TypeScript。

Glamorous 允许您向元素添加 Prop ，如下所示:

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>

我有很多这样的 Prop ，我想将它们添加到我的所有迷人生成的元素中。因此，我创建了一个如下所示的辅助函数:

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

哪里specialProps表示一个函数(如上面的函数)，它将各种 props 添加到我的样式声明数组中。

我打算这样使用它:

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

然后我想要 specialProps 提供的所有 Prop 为我的 JSX 使用而键入。所以，我尝试创建我的 GBPComp像这样输入:

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

问题的出现是因为并非所有返回的元素都一定具有 React.HTMLProps<HTMLElement> 属性。 。他们可能是HTMLAnchorElement或HTMLTableElement等

我怎样才能生成我的 GBPComp动态类型，以便将这些 Prop (即 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]);
};

现在您可以分配 React.HTMLProps<HTMLAnchorElement>支持您的Anchor

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