TypeScript类型推断问题求助：模板类型与绑定键类型安全校验失效

问题核心 #

使用泛型保障类型安全时，当templateType为CIRCLE，添加RECTANGLE的绑定键（如width）未触发预期的类型错误；若改为单个联合类型约束，又无法支持多个模板类型的添加。

解决方案 #

问题根源在于ShapeTemplate[]的类型宽化：TypeScript会将其推断为ShapeTemplate<'CIRCLE' | 'RECTANGLE'>[]，导致bindKeys被放宽为所有形状绑定键的联合数组。通过让泛型约束整个模板数组的每个元素的具体子类型，可以同时实现严格类型校验和多模板支持：

type ShapeType = 'CIRCLE' | 'RECTANGLE';

type ShapeBindKeys<T extends ShapeType> = 
  T extends 'CIRCLE' ? 'radius' : 
  T extends 'RECTANGLE' ? 'width' | 'height' : never;

interface ShapeTemplate<T extends ShapeType = ShapeType> {
  templateType: T;
  bindKeys: ShapeBindKeys<T>[];
}

// 通过泛型推断数组中每个元素的具体子类型，避免类型宽化
function createShapeTemplates<T extends readonly ShapeTemplate[]>(templates: T) {
  return templates;
}

// ✅ 合法：每个模板的bindKeys与templateType严格对应
const validTemplates = createShapeTemplates([
  { templateType: 'CIRCLE', bindKeys: ['radius'] },
  { templateType: 'RECTANGLE', bindKeys: ['width', 'height'] }
]);

// ❌ 非法：CIRCLE模板绑定了RECTANGLE的width，触发类型错误
const invalidTemplates = createShapeTemplates([
  { templateType: 'CIRCLE', bindKeys: ['width'] },
]);

原理说明 #

• 泛型T extends readonly ShapeTemplate[]让TypeScript逐个推断数组元素的具体类型，而非将整个数组宽化为联合类型数组。
• 每个元素的bindKeys会被严格约束为对应templateType的合法键，跨类型绑定会直接触发类型错误。
• 保留了添加多个不同类型模板的能力，同时保障类型安全。

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