Javascript 从另一个变量Typescript的属性获取类型

我有一个react组件，它是一个表单，输入ID需要传递给它的“props”。它还接受一个提交处理程序，该处理程序应该获得一个与传递的输入ID具有相同键的对象

下面是一个例子：

const输入=[
{id:'第一'}，
{id:'第二'}，
];
//参数的键应与输入的ID匹配
类型ExpectedValues={
第一：字符串；
第二：字符串；
};
const handleSubmit=（valuesById:ExpectedValues）=>{}；
const ExampleForm=（）=>(
);
类型输入={
id：字符串；
};
/*
在类型中需要一些魔法来检查输入ID，
onSubmit应该将这些作为对象中的键
*/
类型道具={
输入：输入[]；
onSubmit：（值：{[inputId:string]：string；}）
}
常量形式：FC=props=>null

您需要

只读

数组才能获得正确的键类型。TS将仅推断

字符串

否则

试着这样做：

type Input = {
    readonly id: string;
};

type InputList = Readonly<Input[]>;

type Props<
        Inputs extends InputList = any,
        IFlat = Inputs[number],
        Ids = IFlat[Extract<keyof IFlat, 'id'>]
> = {
    inputs: Inputs;
    onSubmit: (values: {
        [P in Extract<Ids, string>]: string
    }) => void;
};

function Form<I extends InputList>(props: Props<I>) {
    return null;
}

function TestForm() {
    return (
        <Form
            inputs={[{ id: 'goodKey' }] as const}
            onSubmit={values => {
                console.log(values.goodKey);
                console.log(values.badKey);
            }} 
        />
    );
}

类型输入={
只读id:字符串；
};
输入列表类型=只读；
类型道具<
输入扩展输入列表=任何，
IFlat=输入[数量]，
Ids=IFlat[摘录]
> = {
投入：投入；
提交：（值：{
[P in Extract]：字符串
})=>无效；
};
功能表（道具：道具）{
返回null；
}
函数TestForm（）{
返回(
{
console.log（values.goodKey）；
console.log（values.badKey）；
}} 
/>
);
}

---

您应该在

console.log（values.badKey）上得到一个错误
我认为这是不可能的。也许可以尝试在表单主体（状态、处理程序等）中使用enumsInside，它会使代码变得凌乱，但工作起来很有魅力。我毫无希望地问了这个问题，但似乎打字脚本比我想象的更灵活。