Question

我有一个要传递名为HtmlTag的道具的组件，并且基于其值，我想基于html标签使用正确的道具来扩展道具接口。

我尝试创建一个充当地图的Type，然后尝试扩展它，例如

type AllAttrs = {
  a: AnchorHTMLAttributes,
  button: ButtonHTMLAttributes
}

并立即尝试以下操作

interface Props extends AllAttrs["a"] {
  sanitize?: string;
}

我得到“一个接口只能扩展其他接口”

这是我使用组件的方式：

<Element
   Component="a"
   ... more props
>Test</Element>

目标是让TS抱怨缺少的道具，例如href，如果没有通过

Answer 1

您可以具有扩展索引类型查询的接口，但需要将其放入单独的类型别名中（不能直接位于extends子句中）。

但是，这不是正确的方法。在道具中使用交集类型将使推断按预期方式工作（请参见here）：

type AllAttrs = {
  a: AnchorHTMLAttributes<HTMLAnchorElement>,
  button: ButtonHTMLAttributes<HTMLButtonElement>
}


function Element<T extends keyof AllAttrs>({ Component, ...rest}: { Component: T} & AllAttrs[T]){
  return <Component {...rest as any} ></Component>
}

let r = <Element
  Component="a"
  href=""
>Test</Element>

//Error href not on button
let r2 = <Element 
  Component="button"
  href=""
>Test</Element>

React + Typescript：基于Prop的动态类

1 个答案: