如何优化TypeScript中对象键与值字符串关联的两步验证？

核心思路 #

通过泛型函数创建对象，利用泛型参数捕获每个键值对的具体类型，同时在函数参数的类型约束中强制每个值必须包含对应的键名。这种方式无需拆分声明步骤，且IDE能直接在错误的键值对位置高亮提示。

代码实现 #

// 定义泛型创建函数
const createSectionFragments = <T extends Record<`Dato${string}SectionFragment`, string>>(
  fragments: { [K in keyof T]: `${string}${K & string}${string}` }
): T => fragments;

// 测试用的片段字符串
const DatoButtonColumnSectionFragment = "fragment DatoNotSameKeyFragment {}"; // 此处IDE会直接标红报错
const DatoCatalogSectionFragment = "fragment DatoCatalogSectionFragment {}";

// 一步完成对象声明与验证
const SectionFragments = createSectionFragments({
  DatoButtonColumnSectionFragment,
  DatoCatalogSectionFragment,
});

方案优势 #

• 简化代码：无需中间变量，一次完成声明与验证
• 精准错误提示：IDE会直接在不符合要求的键值对（如DatoButtonColumnSectionFragment）上标红，明确指出问题所在
• 保留类型信息：泛型函数的返回类型会保留原始的字面量类型，不会丢失类型精度

原方案的问题分析 #

原方案通过两次satisfies拆分声明，错误只会在第二步的变量上整体报错，IDE无法定位到具体的错误键；同时额外的中间变量增加了代码复杂度。

内容的提问来源于stack exchange，提问作者Thiago Pereira Maia