如何基于SurveyQuestion数组动态扩展TypeScript类型？

要实现通过给定的questions数组自动扩展类型并支持代码补全，核心是利用const断言保留字面量类型+泛型映射类型将数组元素转为对象属性。以下是具体实现步骤：

1. 定义基础类型与类型映射表 #

首先定义问题结构接口，以及字符串类型标识到TS原生类型的映射表，确保数组中的类型字符串能对应到实际TS类型：

// 字符串类型标识到TS原生类型的映射
type QuestionTypeMap = {
  string: string;
  number: number;
  boolean: boolean;
  date: Date; // 可按需扩展更多类型
};

// 单个问题的结构定义
interface SurveyQuestion {
  name: string; // 对应生成的对象属性名
  type: keyof QuestionTypeMap; // 限制为映射表中的类型标识
  label: string; // 问题显示文本
}

2. 定义带字面量类型的问题数组 #

使用as const断言问题数组，让TypeScript捕获每个元素的具体字面量类型（而非宽泛的SurveyQuestion类型），这是实现动态扩展的关键：

const surveyQuestions = [
  { name: 'age', type: 'number', label: '年龄' },
  { name: 'gender', type: 'string', label: '性别' },
  { name: 'isStudent', type: 'boolean', label: '是否学生' }
] as const;

3. 实现数组到对象属性的类型映射 #

通过泛型遍历数组的每个元素，提取name作为属性名，通过QuestionTypeMap映射得到属性类型：

// 将问题数组转为对象属性类型
type QuestionsToProperties<T extends readonly SurveyQuestion[]> = {
  [Q in T[number] as Q['name']]: QuestionTypeMap[Q['type']];
};

// 最终的调研问卷类型，结合基础属性与动态生成的问题属性
type SurveyWithQuestions<T extends readonly SurveyQuestion[]> = {
  id: string;
  title: string;
} & QuestionsToProperties<T>;

4. 使用与验证 #

通过typeof surveyQuestions将数组的字面量类型传入泛型，即可得到自动扩展的类型，支持代码补全与类型校验：

// 生成具体的调研问卷类型
type UserInfoSurvey = SurveyWithQuestions<typeof surveyQuestions>;

// 类型使用示例（自动补全所有问题属性，类型不匹配会报错）
const userSurvey: UserInfoSurvey = {
  id: 'survey_001',
  title: '用户基础信息调研',
  age: 28,
  gender: '女',
  isStudent: false
};

新增问题的适配 #

只需在surveyQuestions数组中添加新的问题项，生成的UserInfoSurvey会自动扩展对应的属性：

// 新增问题
const surveyQuestions = [
  // ...原有问题
  { name: 'hobby', type: 'string', label: '兴趣爱好' }
] as const;

// 此时UserInfoSurvey自动包含hobby: string属性
const updatedSurvey: UserInfoSurvey = {
  // ...原有属性
  hobby: '阅读'
};

关键说明 #

之前的方案无法适配数组遍历，核心原因是未使用as const断言保留数组元素的字面量类型——如果不用断言，TypeScript会将数组元素类型拓宽为SurveyQuestion，无法提取具体的name和type值，导致映射类型无法生成准确的属性。

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