TypeScript类型推断问题：对象键类型被识别为unknown

根因分析 #

你的代码中泛型类型定义存在循环约束问题，导致TypeScript无法正确推断props的值类型。具体来说：

• PropsType<O, K, V>被定义为Record<K, V>，同时V继承自ValueOf<O>
• 当传入props时，O会被推断为Record<K, V>，使得ValueOf<O>等价于V，V extends ValueOf<O>变成无意义的V extends V
• TypeScript无法从这个冗余约束中获取具体类型信息，最终将V推断为unknown

解决方案 #

简化泛型定义，只使用一个泛型参数T直接表示传入的props对象类型，消除循环约束，让TypeScript可以完整推断所有键的类型：

import React from 'react'

type RenderPropsType = {
    isSubmitted: boolean
}

const FormWrapper = <T extends object>({
    render,
    props,
    validationSchema,
}: {
    render: (props: T, formprops: RenderPropsType) => React.ReactNode
    props: T
    validationSchema: any
}) => {
    const RenderProps = {
        isSubmitted: false,
    }

    return (
        <form>
            {render?.(props, { ...RenderProps })}
        </form>
    )
}

type propType = { inactivity: boolean }
const props: propType = { inactivity: false };

<FormWrapper
    props={props}
    validationSchema={null}
    render={(props, formprops) => {
        // 此时props.inactivity的类型为boolean，不再是unknown
        return (
            <> {props?.inactivity} </>
        )
    }}
/>

补充说明 #

如果需要支持部分props（如允许某些键可选），可将props类型改为Partial<T>并同步调整render函数参数类型，但当前需求下直接使用T即可满足类型推断要求。

内容的提问来源于stack exchange，提问作者Georgio