为复杂类型对象添加可选属性导致TypeScript类型推断错误

问题重现 #

当给Question类型添加可选的dynamicNextQuestion属性后，calculate函数返回的回调中answers参数的类型推断会失效（变为宽泛的Record<string, string>）；移除该属性后，answers能正确推断为包含所有问题ID的键值对类型。

根本原因 #

dynamicNextQuestion是一个接收answers作为参数的函数，这在类型系统中形成了循环依赖：

• Question的id类型决定了answers的键类型
• 但dynamicNextQuestion的参数类型又依赖于Question的id类型

当该属性为可选时，TypeScript无法从questions数组中精确推断出id的字面量类型，只能将其放宽为string，进而导致answers的类型也被放宽。

解决方案 #

方案1：使用泛型明确绑定Question的ID类型 #

通过让Question和calculate函数泛型化，强制TypeScript推断出具体的ID字面量类型：

// 泛型Question类型，绑定具体的ID类型
type Question<Id extends string> = {
  id: Id;
  type: 'text' | 'number';
  label: string;
  // 动态函数的参数类型依赖于泛型Id
  dynamicNextQuestion?: (answers: Record<Id, string>) => string;
};

// 泛型calculate函数，从questions数组推断Id类型
function calculate<Id extends string>(questions: Question<Id>[]) {
  return (answers: Record<Id, string>) => {
    let nextQuestionId: Id | undefined = questions[0]?.id;
    
    while (nextQuestionId) {
      const question = questions.find(q => q.id === nextQuestionId);
      if (!question) break;
      
      if (question.dynamicNextQuestion) {
        // 确保动态返回的ID属于预期的Id类型（可根据实际场景调整断言）
        nextQuestionId = question.dynamicNextQuestion(answers) as Id;
      } else {
        const currentIndex = questions.indexOf(question);
        nextQuestionId = questions[currentIndex + 1]?.id;
      }
    }
    
    return answers;
  };
}

// 使用as const让TypeScript推断出精确的ID字面量
const questions = [
  { id: 'name', type: 'text', label: '姓名' },
  { id: 'age', type: 'number', label: '年龄', dynamicNextQuestion: (answers) => answers.age >= '18' ? 'adult' : 'minor' },
  { id: 'adult', type: 'text', label: '成人信息' },
  { id: 'minor', type: 'text', label: '未成年人信息' }
] as const;

const processAnswers = calculate(questions);
// 此时answers会被正确推断为{ name: string; age: string; adult: string; minor: string; }
processAnswers({ name: '张三', age: '20', adult: '程序员' });

方案2：提取问题ID类型并显式指定 #

如果不想使用泛型，可以手动从questions数组中提取ID类型：

type Question = {
  id: string;
  type: 'text' | 'number';
  label: string;
  dynamicNextQuestion?: (answers: Record<string, string>) => string;
};

const questions = [
  { id: 'name', type: 'text', label: '姓名' },
  { id: 'age', type: 'number', label: '年龄', dynamicNextQuestion: (answers) => answers.age >= '18' ? 'adult' : 'minor' },
  { id: 'adult', type: 'text', label: '成人信息' },
  { id: 'minor', type: 'text', label: '未成年人信息' }
] as const;

// 提取数组中所有问题的ID类型
type QuestionIds = typeof questions[number]['id'];

function calculate(questions: Question[]) {
  // 显式指定answers的类型为Record<QuestionIds, string>
  return (answers: Record<QuestionIds, string>) => {
    // 逻辑同前
    let nextQuestionId: QuestionIds | undefined = questions[0]?.id as QuestionIds;
    while (nextQuestionId) {
      const question = questions.find(q => q.id === nextQuestionId);
      if (!question) break;
      
      if (question.dynamicNextQuestion) {
        nextQuestionId = question.dynamicNextQuestion(answers) as QuestionIds;
      } else {
        const currentIndex = questions.indexOf(question);
        nextQuestionId = questions[currentIndex + 1]?.id as QuestionIds;
      }
    }
    return answers;
  };
}

const processAnswers = calculate(questions);
processAnswers({ name: '李四', age: '17', minor: '学生' });

关键说明 #

• 泛型方案更具可复用性，适合需要多次调用calculate的场景
• 使用as const是让TypeScript推断出精确字面量类型的关键，避免类型被放宽为string
• 对于dynamicNextQuestion返回的ID，需要确保其属于预期的ID集合，必要时使用类型断言（或在泛型中约束返回类型）

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