TypeScript数组动态索引取值失败静态值正常是什么原因

这类动态索引取不到值、写死同值索引能正常运行的问题，本质都是动态变量和写死的字面量存在隐性差异，常见两种触发场景：

• 值/类型隐性不匹配
  控制台打印看到Id是114，不代表它和字面量114完全等价：
  • 最高发场景：this.selectedID如果取自路由参数、表单控件值、接口响应字段，实际类型是字符串"114"，甚至可能前后夹带不可见的空白字符（空格、换行、零宽空格等）。注意：原生JS数组确实会自动把字符串格式的数字索引转成数字再取值，但如果this.secs是被Proxy代理的对象（Angular响应式状态、NgRx数据、自定义类实例都可能被代理），不会做自动类型转换，就会出现数字字面量索引能取到、同值字符串变量索引取不到的情况。
  • 低发场景：Id是包装类对象（比如new Number(114)），或者是自定义类的实例刚好toString结果为114，作为索引时不会自动转成原始类型值匹配。
• 取值时序错误
  你提到this.secs在ngOnInit中赋值，但如果赋值逻辑是异步的（HTTP请求、Promise、setTimeout等），动态取值的代码会在secs还没完成赋值时就执行，此时secs还是初始空值，自然返回undefined。你后续测试写死this.secs[114]时，页面已经完成渲染、异步请求已经返回数据，secs已经有对应值，当然可以正常取到结果。

按顺序操作即可定位解决：

1. 先打印精准日志确认变量真实状态，不要只打console.log(Id)：

console.log('Id序列化值:', JSON.stringify(Id), 'Id类型:', typeof Id, '是否严格等于数字114:', Id === 114);

如果最后一项输出为false，先做显式类型转换再取值：

const realId = Number(String(Id).trim());
// 加可选链避免空值报错
this.Name = this.secs[realId]?.Name;

2. 如果日志显示Id === 114为true，直接调整取值逻辑的执行时机，把取值代码挪到this.secs赋值完成的回调内执行，以HTTP请求赋值为例：

// 错误写法：请求未返回就提前取值
// this.secs = [];
// this.Name = this.secs[Id].Name;
// this.http.get('/api/secs').subscribe(res => this.secs = res);

// 正确写法
this.http.get('/api/secs').subscribe(res => {
  this.secs = res;
  const realId = Number(String(this.selectedID).trim());
  this.Name = this.secs[realId]?.Name;
});

提示：尽量不要用any类型跳过TS校验，给secs明确声明类型，比如Array<{id: number, name: string}>，TS可以在编译阶段提前拦住大部分类型不匹配问题。

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