如何设计对象的属性类型通过其他属性类型来动态获取?

Question

我想设计一个这样的 TS 类型，但是不知道该如何设计，就是一个数组类型，数组的每一项都是一个对象，对象有两个属性，第一个属性是 就像这样使用React 组件，第二个对象是需要传递给该组件的属性，希望可以保持有 TS 的类型检查应该如何设计，
使用时就像这样

之前这么设计过这个类型，数组中只传入一项没有问题，但是假如传入多项就会有类型不匹配

interface IProps<T> {
    registryModal:Array<{
        Component:React.ComponentType<T>,
        props:T
    }>
}

Answer 1

你在IProps上约束了所有的props的类型都是T，数组中所有的元素都得是这个类型才行。

这种声明方式我只能想到用any解决：

interface IProps {
    registryModal:Array<{
        Component:React.ComponentType<any>,
        props: any
    }>
}

在你使用每一个组件时再用as声明props的真正类型。

Answer 2

这样子？

import React from 'react'

export function Foo(props: {
  name: string,
  age: number
}) {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </div>
  )
}

export function Bar(props: {
  address: string,
}) {
  return (
    <div>
      <p>{props.address}</p>
    </div>
  )
}

export type ValidComponent = typeof Foo | typeof Bar

export type FormatItem<T> = T extends React.ElementType ? {
  components: T,
  props: React.ComponentProps<T>
} : never

export interface ModelProps<T> {
  registerModal: Array<FormatItem<T>>
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function ModelQueue<T>(props: ModelProps<T>) {
  return null
}

export function App() {
  return (
    // 这里需要显示指明要传入的组件，数组内无法自动推断所有传进来的组件
    <ModelQueue<ValidComponent>
      registerModal={[
        {
          components: Foo,
          props: {
            name: 'kkopite',
            age: 12
          }
        },
        {
          components: Bar,
          props: {
            address: 'hello'
          }
        }
      ]}
    />
  )
}