Angular 5+TypeScript 2.7.1自定义类型数组push报错求助

嘿，这个报错我见得太多啦！本质原因特别简单——你要往里面push元素的那个数组，根本没被初始化，它目前还是undefined状态，不是一个真正的数组实例，自然没法调用push方法~

先给你理清楚问题出在哪，再给你对应Angular 5 + TypeScript 2.7.1的解决方案：

先确认你的自定义类型和数组声明 #

假设你的自定义类型是类似这样的：

// 示例自定义类型
interface MyCustomType {
  id: number;
  name: string;
}

很多人会犯的错是只声明数组的类型，但不给它赋值：

// ❌ 错误写法：只声明类型，数组还是undefined
myCustomArray: MyCustomType[];

这时候你调用myCustomArray.push({id: 2, name: "测试元素"})就会直接抛出你遇到的错误。

正确的解决方法 #

你只需要在使用数组之前，把它初始化为一个空数组就行，具体有几种常用方式：

1. 声明数组时直接初始化 #

这是最直接的方式，在定义数组变量的同时赋值为空数组：

// ✅ 正确写法：声明+初始化
myCustomArray: MyCustomType[] = [];

2. 在Angular组件的构造函数里初始化 #

如果是在Angular组件中使用，也可以在构造函数里完成初始化：

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  myCustomArray: MyCustomType[];

  constructor() {
    // 在组件初始化时把数组设为空数组
    this.myCustomArray = [];
  }

  addNewItem() {
    // 现在push就不会报错啦
    this.myCustomArray.push({ id: 3, name: "新添加的元素" });
  }
}

3. 处理异步场景的初始化 #

如果你的数组是用来接收异步数据（比如HTTP请求返回的结果），一定要确保在订阅异步数据之前就初始化数组：

fetchData() {
  // 先初始化数组，防止订阅回调执行时数组还是undefined
  this.myCustomArray = [];
  
  this.http.get<MyCustomType[]>('/api/data').subscribe(data => {
    // 可以直接push单个元素，或者用扩展运算符批量添加
    this.myCustomArray.push(...data);
  });
}

额外提醒 #

还要检查有没有可能在数组初始化之前就调用了push方法，比如在Angular的ngOnInit钩子之前就执行了添加操作（比如在组件类的顶层直接调用），这时候数组还没被初始化，也会触发同样的错误。

总的来说，核心就是一句话：在调用push之前，必须让你的数组成为一个真正的数组实例（哪怕是空的[]），而不是undefined。

内容的提问来源于stack exchange，提问作者Mr. Toast