javascript - 带有组件的 Typescript 复杂泛型

Question

我用这个基本概念的更复杂版本问这个问题
相对:Can Generic JSX.Elements work in Typescript

我将其缩小到核心元素:

这是 Object A从 TypeA 获取参数

type TypeA = {
  label: string
  value: number
}
const ObjA = ({ label, value }:TypeA) => {
  return <div>
    <div>Label: {label}</div>
    <div>Value: {value}</div>
  </div>
}

这是 Object B从 TypeB 获取参数

type TypeB = {
  label: string
  value: string
  bool: boolean
}
const ObjB = ({ label, value, bool }:TypeB) => {
  return <div>
    <div>Label: {label}</div>
    {bool && <div>Value: {value}</div>}
  </div>
}

现在我将这个 ComponentGroup 收集到一个数组中并从这个数组中创建一个类型:

const ComponentCollection = [
  ObjA,
  ObjB
] as const
type Components = typeof ComponentCollection[number]

然后我创建一个通用组件:

interface GenericProps<T extends Components> {
  Component: T
  title: string
}
const Generic = <T extends Components,>({ Component, title, ...props }:GenericProps<T>) => {
  return (
    <div>
      <label>{title}</label>
      <Component {...props}/>
  </div>
  )
}

最后我可以调用通用组件如下:

<Generic Component={ObjA} title={'Usage A'}           label={'Object A'} value={'String A'}/>
<Generic Component={ObjB} title={'Usage B no Bool'}   label={'Object B'} value={0}/>
<Generic Component={ObjB} title={'Usage B with Bool'} label={'Object B'} value={0} bool/>

尽管它在 JavaScript 中运行得非常好，但我在输入时遇到了一些问题。

我设置了一个 TS-Playground 和一个 Codepen:
TS- Playground :https://tsplay.dev/WvVarW
代码笔:https://codepen.io/Cascade8/pen/eYezGVV

目标:

1. 将上述代码转换为正确的 TypeScript 代码
2. 编译时没有任何 TS 错误或 /@ts-ignore
3. 让 IntelliSense 工作，所以如果你输入 <Generic Component={ObjA} ...它显示此对象的可用类型属性。在这种情况下:label={string: } value={string: }

我不想要的:

1. 使用类或旧函数语法作为我们的 EsLint 要求我们尽可能使用箭头函数。
2. 将对象作为子对象传递。
   我知道这行得通，但它不是首选解决方案，因为主项目有很多这样的组，它们会像这样呈现。
   为什么在 JavaScript 中工作起来非常简单的东西不能在 TypeScript 中工作。

Answer 1

按照您构建类型的方式，您可以使用 GenericProps 中的泛型定义来完成此操作

(注意，我已经将 Prop 捆绑到一个新的 props Prop 中，因为如果您有命名冲突，这应该避免名称冲突)

import React from 'React'

type TypeA = {
  label: string
  value: number
}
const ObjA = ({ label, value }:TypeA) => {
  return <div>
    <label>{label}</label>
    <label>{value}</label>
  </div>
}
type TypeB = {
  label: string
  value: string
  bool: boolean
}
const ObjB = ({ label, value, bool }:TypeB) => {
  return <div>
    <label>{label}</label>
    {bool && <label>{value}</label>}
  </div>
}

type Components = typeof ObjA | typeof ObjB;

interface GenericProps<T extends (...args: any) => any> {
  Component: T
  title: string
  props: Parameters<T>[0]
}

const Generic = <T extends Components,>({ Component, title, props }:GenericProps<T>) => {
  return (
    <div>
      <label>{title}</label>
      <Component {...props as any}/>
    </div>
  )
}
const Usage = () => {
  return <Generic Component={ObjA} title={'Usage'} props={{label: 'ObjectA'}}/>
}
export default Generic