接口数组中的Typescript 不同泛型

发布于03月28日

我有一个带有泛型的类型，用于为函数组件定义一些额外的选项.

type FCWithOptions<T> = React.FC<{options?: T}>;个

使用此类型，我定义了一些具有其自己的额外属性的组件

interface ComponentAOptions {
    option1: string;
    option2: number;
}

interface ComponentBOptions {
    prop1: boolean;
    prop2: Record<string, string>;
}

type ComponentAFC = FCWithOptions<ComponentAOptions>
type ComponentBFC = FCWithOptions<ComponentBOptions>

const ComponentA: ComponentAFC = ({options}) => {
    return <>Component A</>
}

const ComponentB: ComponentBFC = ({options}) => {
    return <>Component B</>
}

然后，我需要使用一组接口在容器组件中传递这些组件，该接口数组包含要传递的组件和该组件的自定义选项(通过属性).

interface ComponentValue<T>{
    component: FCWithOptions<T>;
    componentOptions?: T;
}
interface MainComponentProps<C>{
    components: ComponentValue<C>[]
}
function MainComponent<C>({}: MainComponentProps<C>) {
    return <>Main</>
}

我应该能做的事情是这样的:

<MainComponent components={[
    {component: ComponentA, componentOptions: {option1: "", option2: 2}},
    {component: ComponentB, componentOptions: { prop1: true, props: {} }}
]} />

但是它只对数组的第一个元素起作用，如果我添加其他元素，我会得到一些类型脚本断言

我怎么才能做到这一点呢？谢谢

Here a playground个

interface MainComponentProps<C extends any[]> { components: [...{ [I in keyof C]: ComponentValue<C[I]> }] } function MainComponent<C extends any[]>({ }: MainComponentProps<C>) { return <>Main</> }

<MainComponent components={[ { component: ComponentA, componentOptions: { option1: "", option2: 2 } }, { component: ComponentB, componentOptions: { prop1: true, prop2: {} } } ]} /> // MainComponentProps<[{ option1: string; option2: number; }, { prop1: boolean; prop2: {}; }]>

接口数组中的Typescript 不同泛型

推荐答案

Typescript相关问答推荐

当类型断言函数返回假时，TypScript正在推断从不类型

在这种情况下，如何获得类型安全函数的返回值？

如何用不同的键值初始化角react 形式

如何使函数接受类型脚本中具有正确类型的链接修饰符数组

在动态对话框中使用STEP组件实现布线

泛型函数中输入参数类型的推断问题

对未到达受保护路由的路由环境做出react

是否可以针对联合类型验证类型属性名称？

如何将v-for中的迭代器编写为v-if中的字符串？

在另一个类型的函数中，编译器不会推断模板文字类型

迭代通过具有泛型值的映射类型记录

按函数名的类型安全类型脚本方法包装帮助器

如何为特定参数定义子路由？

当传递带有或不带有参数的函数作为组件props 时，我应该如何指定类型？

创建一个函数，该函数返回一个行为方式与传入函数相同的函数

为什么数字是`{[key：string]：UNKNOWN；}`的有效密钥？

Typescript 是否可以区分泛型参数 void？

为什么我无法在 TypeScript 中重新分配函数？

错误：仅允许在‘使用服务器’文件中导出异步函数

TypeScript 中的通用函数包装和类型推断