TypeScript表单Schema类型如何保留键以获取VS Code代码提示？

问题原因 #

1. 原TFormSchema = Record<string, TOptions>的问题：将键类型宽泛化为string，TypeScript无法推断出具体的键名（如GUESTS、CHECK_IN），因此丢失代码提示。
2. 错误泛型写法type TFormSchema<K> = {[P in keyof K]: TOptions};的问题：若尝试用该类型约束Schema，会出现循环引用——typeof schema依赖TFormSchema，而TFormSchema又依赖typeof schema，触发类型注解自引用错误。

解决方案 #

方案1：泛型工厂函数（推荐） #

通过泛型函数自动推断Schema的具体键名，同时强制每个字段符合TOptions结构，兼顾一致性与代码提示：

type TOptions = { title: string; key: string };

// 泛型函数，用于创建符合规范的表单Schema
function createFormSchema<T extends Record<string, TOptions>>(schema: T) {
  return schema;
}

// 使用函数创建Schema，自动保留键名提示并做类型检查
export const ROOM_BOOKING_FORM_SCHEMA = createFormSchema({
  GUESTS: { title: 'Guests', key: 'guests' },
  CHECK_IN: { title: 'Check In', key: 'check-in' },
  CHECK_OUT: { title: 'Check Out', key: 'check-out' },
  FIRST_NAME: { title: 'First Name', key: 'firstName' },
  LAST_NAME: { title: 'Last Name', key: 'lastName' },
  EMAIL: { title: 'Email', key: 'email' },
  MOBILE: { title: 'Mobile', key: 'mobileNo' },
  REQUEST: { title: 'Request', key: 'request' },
});

方案2：显式指定键联合类型 #

若不需要动态创建Schema，可直接通过联合类型指定具体键名，同时约束字段类型：

type TOptions = { title: string; key: string };
// 泛型类型，接收键的联合类型，约束每个键对应TOptions
type TFormSchema<T extends string> = Record<T, TOptions>;

// 显式指定键的联合类型，保证类型一致性的同时保留提示
export const ROOM_BOOKING_FORM_SCHEMA: TFormSchema<'GUESTS' | 'CHECK_IN' | 'CHECK_OUT' | 'FIRST_NAME' | 'LAST_NAME' | 'EMAIL' | 'MOBILE' | 'REQUEST'> = {
  GUESTS: { title: 'Guests', key: 'guests' },
  CHECK_IN: { title: 'Check In', key: 'check-in' },
  CHECK_OUT: { title: 'Check Out', key: 'check-out' },
  FIRST_NAME: { title: 'First Name', key: 'firstName' },
  LAST_NAME: { title: 'Last Name', key: 'lastName' },
  EMAIL: { title: 'Email', key: 'email' },
  MOBILE: { title: 'Mobile', key: 'mobileNo' },
  REQUEST: { title: 'Request', key: 'request' },
};

效果验证 #

两种方案都能实现：

• 强制所有表单字段必须符合TOptions的结构（缺一不可、类型匹配）
• 使用点语法（如ROOM_BOOKING_FORM_SCHEMA.GUESTS）或解构时，VS Code能提供完整的键名与字段属性提示

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