问题描述

我是用这个基本概念的更复杂版本来问这个问题的
版本：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收集到一个数组中，并在此数组之外创建一个Type：

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游乐场和一个Codeen：
TS游乐场：https://tsplay.dev/WvVarW
Codesen：https://codepen.io/Cascade8/pen/eYezGVV

目标：

1. 将上面的代码转换为正确的打字代码
2. 编译时不出现任何TS错误或/@ts-ignore
3. 使IntelliSense工作，因此如果您键入<Generic Component={ObjA} ...，它将显示此对象的可用类型属性。在本例中：label={string: } value={string: }

我不想要的：

1. 使用类或旧函数语法作为EsLint要求我们尽可能使用Arrow-Function。
2. 将对象作为子对象传递。
   我知道这很有效，但它不是首选的解决方案，因为主项目有很多这样的组，它们是这样呈现的。
   为什么打字稿中的某些东西不能在非常简单的JavaScript中工作。

推荐答案

按照构造类型的方式，可以使用泛型内部的定义GenericProps

(注意，我已经将道具捆绑到一个新的props道具中，这样可以避免命名冲突)

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

这篇关于带有组件的打印脚本复杂泛型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！