TypeScript中如何通过动态字符串访问类属性并消除TS7053错误

问题重现 #

代码示例：

class Test {
  foo1: string = '';
  foo2: string = '';
  foo3: string = '';
  baz: number = 1234;
}

let bar = new Test();

for (let i = 1; i <= 3; i++)
  bar['foo' + i] = '42';

TypeScript报错提示：

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Test'. No index signature with a parameter of type 'string' was found on type 'Test'.

几种可行的解决方案 #

1. 对动态键做类型断言

直接告诉TypeScript，动态生成的键是Test类的合法属性：

for (let i = 1; i <= 3; i++) {
  const key = `foo${i}` as keyof Test;
  bar[key] = '42';
}

优点：不修改类结构，简单直接，适合属性固定的场景。

2. 给类添加字符串索引签名

如果需要更通用的字符串索引能力，可以给类添加索引签名，注意要和现有属性的类型兼容：

class Test {
  foo1: string = '';
  foo2: string = '';
  foo3: string = '';
  baz: number = 1234;
  // 索引签名：所有字符串键对应的属性类型为string或number
  [key: string]: string | number;
}

let bar = new Test();

for (let i = 1; i <= 3; i++) {
  bar[`foo${i}`] = '42';
}

缺点：会放宽对所有字符串索引属性的类型限制，可能允许误操作其他属性。

3. 用精确的键类型约束

先定义目标属性的键集合，再断言动态键属于该集合，避免误操作非目标属性：

// 明确指定合法的foo属性键
type FooKeys = 'foo1' | 'foo2' | 'foo3';

class Test {
  foo1: string = '';
  foo2: string = '';
  foo3: string = '';
  baz: number = 1234;
}

let bar = new Test();

for (let i = 1; i <= 3; i++) {
  const key = `foo${i}` as FooKeys;
  bar[key] = '42';
}

优点：比直接断言keyof Test更精确，只允许操作指定的属性。

4. 用映射类型重构类（适合属性有规律的场景）

如果属性命名有固定规律（比如foo1、foo2），可以用映射类型让TypeScript自动识别这些动态键：

// 定义数字范围
type FooNumbers = 1 | 2 | 3;
// 映射生成foo1、foo2、foo3的属性类型
type FooProps = { [K in `foo${FooNumbers}`]: string };

class Test implements FooProps {
  foo1 = '';
  foo2 = '';
  foo3 = '';
  baz: number = 1234;
}

let bar = new Test();

// 限定i的类型为FooNumbers，TS自动推断键合法
for (let i: FooNumbers = 1; i <= 3; i++) {
  bar[`foo${i}`] = '42';
}

优点：类型更安全，无需额外断言，适合批量生成规律属性的场景。

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