TypeScript：为嵌套对象内部的对象键添加类型定义

解决方案 #

问题根源在于你的 FormConfig 类型定义错误地将顶层表单字段ID（如 weekdays、months）作为每个字段内部 options 的键类型，导致类型不匹配。我们需要让每个表单字段拥有独立的选项键类型，而非共享顶层字段ID。

以下是修正后的完整代码：

类型定义

interface ValuePair {
  value: string;
  label: string;
}

// 每个选项配置独立维护自己的选项键类型
interface OptionsConfig<OptionKeys extends string> {
  type: 'checkbox';
  label: string;
  options: Record<OptionKeys, ValuePair>;
}

// FormConfig 改为映射类型，允许每个字段拥有专属的选项配置
type FormConfig<T extends Record<string, OptionsConfig<any>>> = T;

Hook 代码

function useMyForm<T extends FormConfig<any>>(
  config: T
): {
  form: T;
} {
  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 some months',
      options: { january: { label: 'January is cold', value: 'january' } },
    },
  });
};

关键修正说明 #

1. 解耦顶层字段与选项键类型：原代码中 FormConfig 强制所有字段的 options 使用顶层字段ID作为键类型，现在改为让每个 OptionsConfig 独立声明自己的选项键类型。
2. 自动类型推导：通过让 Hook 接收泛型 T 并直接返回该类型，TypeScript 会自动推导每个字段的具体选项键（如 monday、january），无需手动指定泛型参数。

修改后，多个表单字段的配置可正确通过类型检查，同时保留完整的类型提示功能。

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