Angular 17中如何实现基于类型的动态泛型BlockItem接口

我正在开发一个Angular 17应用，需要实现一个泛型接口，根据传入的块类型枚举值自动匹配对应的专属配置接口。

首先定义了块类型枚举：

export enum BlockTypes {
  text        = 'TEXT',
  check       = 'CHECKBOX',
  header1     = 'HEADER1',
  table       = 'TABLE',
  container   = 'CONTAINER',
};

每种块类型都有对应的专属配置接口（如BlockText、BlockChecklist等）。我尝试创建泛型接口BlockItem，但实现时出现错误：'Type 'T' cannot be used to index type 'BlockModel'。

我的实现代码如下：

export interface BlockItem<T extends BlockTypes> {
    blockType: T;
    // 报错位置
    data: BlockModel[T];
  }
  
export interface BlockModel {
    [BlockTypes.text]:      BlockText;
    [BlockTypes.check]:     BlockChecklist;
    [BlockTypes.header1]:   BlockHeader;
    [BlockTypes.table]:     BlockTable;
    [BlockTypes.container]: BlockContainer;
}

期望能创建如下类型安全的示例变量：

const exampleBlockText: BlockItem<BlockTypes.text> = {
  blockType: BlockTypes.text,
  data: { content: 'Hello, World!' },
};
const exampleBlockCheck: BlockItem<BlockTypes.check> = {
  blockType: BlockTypes.check,
  data: { list: [ { label: 'Option 1', checked: false }, { label: 'Option 2', checked: false } ] },
};

我希望完全避免使用any类型，确保每个块类型严格对应专属接口。同时我的Angular 17项目tsconfig配置如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

错误的核心原因是：TypeScript不会自动将枚举成员类型（如BlockTypes.text）与其对应的字符串值（如'TEXT'）视为可互换的索引键。BlockModel的键是枚举的字符串值，而泛型T是枚举成员类型，因此无法直接用T索引BlockModel。

以下是两种符合你需求的解决方案：

方案一：保留原有泛型传入方式（推荐） #

通过${T}将枚举成员类型转换为对应的字符串值类型，确保能正确匹配BlockModel的键，同时完全兼容你期望的使用方式：

// 枚举定义不变
export enum BlockTypes {
  text        = 'TEXT',
  check       = 'CHECKBOX',
  header1     = 'HEADER1',
  table       = 'TABLE',
  container   = 'CONTAINER',
};

// 各块类型专属接口
export interface BlockText {
  content: string;
}

export interface BlockChecklist {
  list: { label: string; checked: boolean }[];
}

export interface BlockHeader {
  text: string;
}

export interface BlockTable {
  rows: string[][];
}

export interface BlockContainer {
  children: BlockItem<any>[]; // 可根据需求调整为递归泛型
}

// 块模型映射不变
export interface BlockModel {
  [BlockTypes.text]: BlockText;
  [BlockTypes.check]: BlockChecklist;
  [BlockTypes.header1]: BlockHeader;
  [BlockTypes.table]: BlockTable;
  [BlockTypes.container]: BlockContainer;
}

// 修正后的泛型接口
export interface BlockItem<T extends BlockTypes> {
  blockType: T;
  // 使用`${T}`将枚举成员类型转换为字符串值类型，匹配BlockModel的键
  data: BlockModel[`${T}`];
}

此时你的示例变量可以正常工作，且完全满足类型约束：

const exampleBlockText: BlockItem<BlockTypes.text> = {
  blockType: BlockTypes.text,
  data: { content: 'Hello, World!' },
};

const exampleBlockCheck: BlockItem<BlockTypes.check> = {
  blockType: BlockTypes.check,
  data: { list: [ { label: 'Option 1', checked: false }, { label: 'Option 2', checked: false } ] },
};

方案二：调整泛型约束为BlockModel的键类型 #

如果你愿意修改泛型参数的传入方式，可以将T约束为BlockModel的键（即枚举的字符串值），并关联对应的枚举成员：

// 其他定义不变
export interface BlockItem<T extends keyof BlockModel> {
  blockType: BlockTypes[T];
  data: BlockModel[T];
}

// 使用方式
const exampleBlockText: BlockItem<typeof BlockTypes.text> = {
  blockType: BlockTypes.text,
  data: { content: 'Hello, World!' },
};

关于tsconfig的注意事项 #

你的配置中启用了"noPropertyAccessFromIndexSignature": true，该选项禁止动态索引访问属性，但上述两种方案均使用了明确的键映射，因此不会触发该错误。同时strict: false的配置也不会影响泛型的类型推断逻辑。

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