TypeScript中如何将Enum作为对象键？解决索引类型错误

问题场景 #

在TypeScript项目中，全局定义了枚举TableType，父组件将TableType.VideosDst作为props传入子组件VideosDstTable。子组件内创建了以TableType枚举值为键的tableHeaders对象，但使用tableHeaders[type]获取表头时出现如下类型错误：

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type

核心原因 #

TypeScript默认会将tableHeaders的键推断为宽泛的string类型，而传入的type是TableType枚举类型，两者类型不匹配，导致索引操作无法通过类型检查。

解决方案 #

方案1：显式定义tableHeaders的类型 #

最严谨的方式是给tableHeaders指定Record<TableType, 表头数组类型>，明确对象的键为TableType枚举值，对应值符合Table组件的表头要求：

import { TableType } from './path-to-enum-file';
import { ITableProps } from './Table';

interface IVideosDstTableProps {
  type: TableType;
}

// 显式指定类型，绑定键为TableType，值为Table组件要求的表头数组
const tableHeaders: Record<TableType, ITableProps['tableHeaders']> = {
  [TableType.RawMedias]: [
    { id: 1, name: 'Name' },
    { id: 2, name: 'Status' },
  ],
  [TableType.Datasets]: [
    { id: 1, name: 'Name' },
    { id: 2, name: 'Status' },
  ],
  [TableType.VideosDst]: [
    { id: 1, name: 'Name' },
    { id: 2, name: 'Status' },
  ],
};

// 此时tableHeaders[type]类型会被正确推断，无错误
<Table tableHeaders={tableHeaders[type]}>
  {/* 子组件内容 */}
</Table>

方案2：用as const让TypeScript推断精确类型 #

如果不想手动写类型，可以用as const断言tableHeaders的结构，让TypeScript自动推断出键是具体的枚举值：

const tableHeaders = {
  [TableType.RawMedias]: [
    { id: 1, name: 'Name' },
    { id: 2, name: 'Status' },
  ],
  [TableType.Datasets]: [
    { id: 1, name: 'Name' },
    { id: 2, name: 'Status' },
  ],
  [TableType.VideosDst]: [
    { id: 1, name: 'Name' },
    { id: 2, name: 'Status' },
  ],
} as const;

// 需断言表头数组类型匹配Table组件要求
<Table tableHeaders={tableHeaders[type] as ITableProps['tableHeaders']}>
  {/* 子组件内容 */}
</Table>

方案3：临时类型断言（不推荐） #

如果需要快速解决，可直接对索引结果做类型断言，但这种方式会跳过TypeScript的类型检查，可能隐藏潜在问题：

<Table tableHeaders={tableHeaders[type] as ITableProps['tableHeaders']}>
  {/* 子组件内容 */}
</Table>

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