带有组件的打印脚本复杂泛型

Typescript complex Generics with Components(带有组件的打印脚本复杂泛型)

本文介绍了带有组件的打印脚本复杂泛型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是用这个基本概念的更复杂版本来问这个问题的
版本: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

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

本文标题为:带有组件的打印脚本复杂泛型

基础教程推荐