Typescript 復合 Generics 與組件

Question

我用這個基本概念的更復雜的版本問這個問題
Rel: Generic JSX.Elements 可以在 Typescript 中工作嗎

我將其縮小到核心元素：

這是從TypeA獲取參數的Object A

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

這是從TypeB獲取參數的Object B

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-游樂場： https://tsplay.dev/WvVarW
代碼筆： https://codepen.io/Cascade8/pen/eYezGVV

目標：

1. 將此代碼轉換為正確的 TypeScript 代碼
2. 編譯時沒有任何 TS-Errors 或/@ts-ignore
3. 使 IntelliSense 工作，因此如果您鍵入<Generic Component={ObjA}...它會顯示此 Object 的可用類型屬性。 在這種情況下： label={string: } value={string: }

我不想要的：

1. 使用類或舊的 function 語法，因為我們的 EsLint 要求我們盡可能使用箭頭函數。
2. 將對象作為子項傳遞。
   我知道這行得通，但這不是首選的解決方案，因為主項目有很多這樣的組，它們會像這樣呈現。
   為什么不應該在 TypeScript 中工作，而在 JavaScript 中工作非常簡單。

Answer 1

按照您構建類型的方式，您可以使用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

Answer 2

沒有任何類型的斷言是可能的。 考慮這個例子：

import React, { FC, } from 'react'

type Type = {
  label: string;
  value: string | number
}

type TypeA = {
  label: string
  value: number
}

type FixSubtyping<T> = Omit<T, 'title'>

const ObjA = ({ label, value }: FixSubtyping<TypeA>) => {
  return <div>
    <label>{label}</label>
    <label>{value}</label>
  </div>
}

type TypeB = {
  label: string
  value: string
  bool: boolean
}

const ObjB = ({ label, value, bool }: FixSubtyping<TypeB>) => {
  return <div>
    <label>{label}</label>
    {bool && <label>{value}</label>}
  </div>
}


type Props<T> = T & {
  title: string
}


const withTitle = <T extends Type>(Component: FC<FixSubtyping<Props<T>>>) =>
  ({ title, ...props }: Props<T>) => (
    <div>
      <label>{title}</label>
      <Component {...props} />
    </div>
  )

const GenericA = withTitle(ObjA)
const GenericB = withTitle(ObjB)

const jsxA = <GenericA title={'Usage'} label={'A'} value={42} /> // // ok

const jsxB = <GenericB title={'Usage'} label={'A'} value={'str'} bool={true} /> // // ok

操場

發生此錯誤是因為props被推斷為Omit<T,'title'>所以我們應該向 TS 保證 Component props與Omit<T,'title'>兼容

但是有一個缺點，您需要更新其他組件中的道具類型。 如果這不是一個選項，我認為最好的方法是重載您的Generic function：

import React, { FC, } from 'react'

type TypeA = {
  label: string
  value: number
}

type FixSubtyping<T> = Omit<T, 'title'>

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 Props<T> = T & {
  Component: FC<T>,
  title: string
}


function Generic<T,>(props: Props<T>): JSX.Element
function Generic({ Component, title, ...props }: Props<unknown>) {
  return (
    <div>
      <label>{title}</label>
      <Component {...props} />
    </div>
  )
}

const jsxA = <Generic Component={ObjA} title={'Usage'} label={'A'} value={42} /> // // ok

const jsxB = <Generic Component={ObjB} title={'Usage'} label={'A'} value={'str'} bool={true} /> // // ok

操場