循环中如何在模板字面量应用类型定义解决TypeScript索引报错？

TypeScript报错的核心原因是：它无法确认service${index+1}这种动态生成的字符串属于你children对象的合法键，因此默认推断为any类型，触发了类型检查错误。下面是几种实用的解决办法：

方法一：定义精确的类型约束 #

给数据结构明确TypeScript类型，把合法的service键声明为联合类型，让TS能识别动态生成的键是合法的：

// 定义子项类型，明确service1、service2是合法键
type ServiceChild = {
  service1?: string;
  service2?: string;
  caption: string;
};

type LinkItem = {
  name: string;
  children: ServiceChild[];
};

// 给links指定类型
const links: LinkItem[] = [
  {
    name: 'Services',
    children: [
      {
        service1: 'First service',
        caption: 'We provide a full range of audit and assurance services to a wide range of clients',
      },
      {
        service2: 'Second service',
        caption: 'Second caption'
      }
    ]
  }
];

// 循环时用类型断言指定合法键范围
links[0].children.forEach((child, index) => {
  const serviceKey = `service${index + 1}` as 'service1' | 'service2';
  const serviceValue = child[serviceKey];
  console.log(serviceValue);
});

通过as 'service1' | 'service2'的类型断言，明确告诉TS动态生成的字符串只会是这两个合法键之一，消除类型报错。

方法二：使用字符串索引签名（适合service数量不固定的场景） #

如果后续可能新增service3、service4等不确定数量的键，可以给子项类型添加字符串索引签名，允许任意字符串作为键（注意：这会降低一点类型安全性）：

type ServiceChild = {
  [key: string]: string; // 允许任意字符串键，值为string类型
};

type LinkItem = {
  name: string;
  children: ServiceChild[];
};

const links: LinkItem[] = [/* 原数据结构不变 */];

links[0].children.forEach((child, index) => {
  const serviceKey = `service${index + 1}`;
  const serviceValue = child[serviceKey];
  console.log(serviceValue);
});

这样TS就会明确child对象支持任意字符串索引，不会再抛出类型错误。

方法三：重构数据结构（推荐，更易维护） #

原数据结构中动态命名的service键设计不够直观，不如把服务名称统一放在固定属性里，彻底避免动态索引问题：

type ServiceChild = {
  serviceName: string;
  caption: string;
};

type LinkItem = {
  name: string;
  children: ServiceChild[];
};

const links: LinkItem[] = [
  {
    name: 'Services',
    children: [
      {
        serviceName: 'First service',
        caption: 'We provide a full range of audit and assurance services to a wide range of clients',
      },
      {
        serviceName: 'Second service',
        caption: 'Second caption'
      }
    ]
  }
];

// 循环直接访问固定属性，完全规避类型问题
links[0].children.forEach((child) => {
  console.log(child.serviceName);
});

这种结构更清晰，类型检查更严格，后续维护也更方便，是最推荐的解决方案。

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