首先，對于糟糕的標題感到抱歉。我有一個問題，我想在嵌套物件中鍵入欄位的鍵。
這是我的型別的一個片段：
type FormConfig<FormFieldIds extends string> = Record<FormFieldIds, OptionsConfig<FormFieldIds>>;
interface OptionsConfig<FormFieldOptions extends string> {
type: 'checkbox';
label: string;
options: Record<FormFieldOptions, ValuePair>;
}
interface ValuePair {
value: string;
label: string;
}
我的鉤子：
function useMyForm<FormFieldIds extends string>(
config: FormConfig<FormFieldIds>
): {
form: FormConfig<FormFieldIds>;
} {
return { form: config };
}
我的組件：
export const MyPage = () => {
const { form } = useMyForm({
weekdays: {
type: 'checkbox',
label: 'Pick some days',
options: { monday: { label: 'Monday is a great day!', value: 'monday' } },
},
months: {
type: 'checkbox',
label: 'Pick som months',
options: { january: { label: 'January is cold', value: 'january' } },
},
});
};
當我只有一個物件時，這非常有效，但當我添加更多物件時，TypeScript 會抱怨。
所以問題是我無法在配置的每個物件中鍵入選項物件的鍵。有人知道我該怎么做嗎？
我用提供更多解釋的代碼制作了一個沙箱。https://codesandbox.io/s/stupefied-leaf-ss2fi2?file=/src/App.tsx
uj5u.com熱心網友回復：
你應該只使用一個Record：
interface ValuePair {
value: string;
label: string;
}
interface OptionsConfig<FormFieldOptions extends string> {
type: "checkbox";
label: string;
options: Record<FormFieldOptions, ValuePair>;
}
function useMyForm<
Conf extends Record<string, OptionsConfig<string>>
>(
config: Conf
): {
form: Conf;
} {
return { form: config };
}
操場
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/537061.html