TypeScript多步骤表单类型定义难题：实现对象遵循指定接口且类型由值自动推断

你遇到的问题是TypeScript泛型场景里的典型需求——既要限制字段只能来自Form的键，又要让每个Step的类型精确匹配实际包含的字段，不能强制全量字段，也不能用Partial导致字段可选。下面是具体的解决方案：

首先明确我们的基础类型：

type Form = {
  firstName: string
  lastName: string
  streetAddress: string
  streetNumber: string
};

type Field = {
  required: boolean
  label: string
}

解决方案：泛型Step + 辅助推断函数 #

我们需要调整Step的泛型定义，让它接受Form键的子集作为泛型参数，再通过一个简单的辅助函数让TypeScript自动推导这个参数，无需手动指定：

// 定义泛型Step，T是Form键的子集，fields严格对应这些键
type Step<T extends keyof Form> = {
  fields: Record<T, Field>
  // 这里可以添加步骤的其他属性，比如标题、描述等
  title?: string
};

// 辅助函数：帮助TypeScript自动推断当前Step包含的字段子集
const createStep = <T extends keyof Form>(step: Step<T>): Step<T> => step;

使用示例 #

现在创建步骤时，TypeScript会自动根据你传入的fields推断出精确的类型：

// 创建个人信息步骤，仅包含firstName和lastName
const step1 = createStep({
  title: "Personal Information",
  fields: {
    firstName: { required: true, label: "First Name" },
    lastName: { required: true, label: "Last Name" }
  }
});

// ✅ 访问存在的字段完全正常
step1.fields.firstName.required;

// ❌ 访问不存在的字段会直接触发TypeScript错误
// step1.fields.streetAddress; // 报错：类型Step<"firstName" | "lastName">上不存在属性"streetAddress"

// 创建地址信息步骤，仅包含streetAddress和streetNumber
const step2 = createStep({
  title: "Address Details",
  fields: {
    streetAddress: { required: true, label: "Street Address" },
    streetNumber: { required: false, label: "Street Number" }
  }
});

// ✅ 访问地址字段正常
step2.fields.streetNumber.label;

// ❌ 访问个人信息字段报错
// step2.fields.lastName; // 报错：类型Step<"streetAddress" | "streetNumber">上不存在属性"lastName"

为什么这个方案有效？ #

• 泛型T extends keyof Form确保了fields的键只能是Form中已定义的字段，避免了非法字段的输入；
• Record<T, Field>让fields中的每个字段都是必填的（不存在可选情况），完全符合实际需求；
• 辅助函数createStep利用TypeScript的类型推断能力，自动识别你传入的字段子集，无需手动指定泛型参数，代码更简洁。

如果不想用辅助函数，也可以手动指定泛型参数（比如const step1: Step<"firstName" | "lastName"> = {...}），但辅助函数能让整个过程更自动化，减少重复代码。

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