TypeScript：如何将接口中的嵌套数字ID属性设为可选

首先你遇到的核心问题是索引签名的类型兼容性，以及对“可选属性”的误解：TypeScript的索引签名本身就表示这类键是可选存在的，但同时要求数字索引的类型必须是字符串索引类型的子集（因为JS中数字键会被自动转为字符串处理）。你原来的代码里数字索引的值是数组类型，但字符串索引的类型里不包含数组，导致类型冲突，所以无法正确识别数据。

下面是修正后的解决方案：

步骤1：提取嵌套类型，提升可读性 #

先把数字ID对应的数组元素类型单独定义，避免代码臃肿：

interface CounterStats {
  count_targets: number;
  count_targets_excluded: number;
  count_targets_pending: number;
  count_targets_in_progress: number;
  count_targets_completed: number;
  count_targets_failed: number;
}

步骤2：修正CountersData接口的索引签名 #

调整字符串索引的类型，使其包含数字索引的数组类型，同时保留其他允许的类型：

interface CountersData {
  // 在这里添加你的其他固定属性（如果有的话）
  // 例如：total_count?: number; status?: string;

  // 数字类型的键（对应JSON中的1830、1835这类ID），值为CounterStats数组
  // 索引签名本身就表示这些键是可选的，不需要加?
  [id: number]: CounterStats[];

  // 字符串类型的键，必须包含数字索引的类型（因为数字键会转成字符串）
  [key: string]: number | string | CounterStats[] | undefined;
}

步骤3：正确访问数据 #

使用时可以直接通过数字或字符串键访问，若需要确保类型安全，可以添加类型守卫：

const counters: CountersData = /* 你的JSON数据 */;

// 通过数字键访问
const stats1830 = counters[1830];
// 通过字符串键访问（JS中数字键本质是字符串）
const stats1835 = counters['1835'];

// 类型守卫确保是数组类型
if (Array.isArray(stats1830)) {
  console.log(stats1830[0].count_targets_completed);
}

替代方案：使用交叉类型更灵活 #

如果需要更清晰地区分固定属性、数字ID键和其他字符串键，可以用交叉类型组合：

// 固定属性接口
interface CountersBaseProps {
  // 你的固定属性
}

type CountersData = CountersBaseProps & 
  Partial<Record<number, CounterStats[]>> & 
  Record<string, number | string | undefined>;

这里Partial<Record<number, CounterStats[]>>明确表示所有数字ID键都是可选的，同时Record<string, ...>处理其他字符串属性。

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