TypeScript中如何动态访问并修改嵌套对象的子对象属性？

问题背景 #

定义了以下TypeScript接口：

export interface ChildObject {
  [key: string]: string | number | boolean;
  id: number;
  title: string;
  quantity: number;
  rate: number;
  enabled: boolean;
}

export interface ParentObject {
  [key: string]: string | number | ChildObject;
  id: number;
  name: string;
  quantity: number;
  rate: number, 
  children1: ChildObject,
  children2: ChildObject, 
  children3: ChildObject
}

尝试通过以下代码动态修改子对象的quantity属性：

parent: {
  'name': 'parentName',
  'quantity': 1,
  'rate': 100,
  'children1': {}
} as ParentObject,

modifyChildValues(index:string, quantity: number) {
  this.parent[index]['quantity'] += quantity;
}

调用时传入index = 'children1'，期望修改parent.children1.quantity，但TypeScript报错：

Property 'quantity' does not exist on type 'string | number | { [x: string]: string | number | boolean; id: number; title: string; quantity: number; rate: number; enabled: boolean; }'.

Element implicitly has an 'any' type because expression of type "quantity" can't be used to index type 'string | number | { [x: string]: string | number | boolean; id: number; title: string; quantity: number; rate: number; enabled: boolean; }'

解决方案 #

方案1：精确限定子对象键的类型（推荐） #

通过定义子对象键的联合类型，让TypeScript明确知道哪些索引对应ChildObject类型：

1. 先定义子对象键的联合类型：

type ChildKeys = 'children1' | 'children2' | 'children3';

2. 修改ParentObject接口，使用映射类型定义子对象属性：

export interface ParentObject {
  id: number;
  name: string;
  quantity: number;
  rate: number;
  [key in ChildKeys]: ChildObject;
}

3. 调整modifyChildValues的参数类型，限制index只能是ChildKeys：

modifyChildValues(index: ChildKeys, quantity: number) {
  this.parent[index].quantity += quantity;
}

这种方式完全符合TypeScript类型检查规则，无需额外判断，同时保证类型安全。

方案2：类型断言（快速实现，需自行保证安全） #

如果不想修改原有接口定义，可以直接用类型断言告诉TypeScript当前值是ChildObject：

modifyChildValues(index: string, quantity: number) {
  (this.parent[index] as ChildObject).quantity += quantity;
}

⚠️ 注意：这种方式需要确保传入的index一定是子对象的键（如children1），如果传入name这类非子对象键，运行时会出现错误。

方案3：通用类型守卫（安全且无需逐个判断键名） #

编写一个类型守卫函数，通过检查对象结构判断是否为ChildObject：

function isChildObject(obj: unknown): obj is ChildObject {
  return typeof obj === 'object' && obj !== null && 'quantity' in obj;
}

然后在修改函数中使用：

modifyChildValues(index: string, quantity: number) {
  const target = this.parent[index];
  if (isChildObject(target)) {
    target.quantity += quantity;
  } else {
    throw new Error(`索引 ${index} 对应的不是ChildObject类型`);
  }
}

这种方式不需要逐个判断每个子对象键名，同时在运行时也能做安全校验，避免非法输入导致的错误。

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