如何通过变量名索引对象？Angular组件中避免硬编码检测SimpleChanges

代码示例与疑问 #

现有如下TypeScript代码：

let key!: myType;

let dict: any = { key: 'value' };

是否可以通过变量key的名称来索引该dict对象，比如用类似dict(nameof(key))的方式返回'value'？

需求背景 #

在Angular组件中检测SimpleChanges时，希望仅当某个@Input变量发生变化时触发特定方法，但不想硬编码变量名称字符串。尝试直接用变量索引对象，但因变量已指定特定类型而无法生效。

解决方案 #

TypeScript没有原生的nameof函数，但可以通过以下几种类型安全的方式实现需求，避免硬编码：

1. 类型安全的键名提取工具函数 #

编写一个工具函数，同时保留类型检查：

function getKeyName<T extends object, K extends keyof T>(obj: T, key: K): K {
  return key;
}

// 示例用法
type DictType = { key: string };
let key!: myType;
let dict: DictType = { key: 'value' };

const keyName = getKeyName(dict, 'key');
console.log(dict[keyName]); // 输出 'value'

这里将dict的类型从any改为明确的DictType，确保类型检查生效。

2. Angular SimpleChanges场景适配 #

在组件中结合keyof关键字，直接基于组件自身类型获取输入属性名：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent implements OnChanges {
  @Input() targetInput!: string;

  ngOnChanges(changes: SimpleChanges): void {
    const inputKey = 'targetInput' as keyof this;
    if (changes[inputKey]) {
      this.handleInputChange();
    }
  }

  private handleInputChange(): void {
    console.log('目标输入变量已更新');
  }
}

3. 枚举统一管理输入键名 #

如果有多个@Input变量，用枚举统一维护键名，彻底消除硬编码：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

enum ComponentInputs {
  TargetInput = 'targetInput',
  AnotherInput = 'anotherInput'
}

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent implements OnChanges {
  @Input() targetInput!: string;
  @Input() anotherInput!: number;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes[ComponentInputs.TargetInput]) {
      this.handleTargetChange();
    }
    if (changes[ComponentInputs.AnotherInput]) {
      this.handleAnotherChange();
    }
  }

  private handleTargetChange(): void {
    // 处理targetInput变化逻辑
  }

  private handleAnotherChange(): void {
    // 处理anotherInput变化逻辑
  }
}

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