TypeScript中any[]与[]初始化的区别及ngIf报错问题

问题场景 #

在Angular组件的HTML模板中使用*ngIf判断数组长度时出现报错：

<div *ngIf="apps.length === 0">

组件类中初始声明变量：

public apps: any[];

通过REST API获取数据并赋值的逻辑：

ngOnInit() {
    const refSpinner = this._simsSpinnerService.showSpinner('my-apps-spinner');
    const getMyApps = this._myAppsService.getMyApps().pipe(share(), finalize(() => { this._simsSpinnerService.stopSpinner(refSpinner); }))
    this._subscriptions.push(getMyApps.subscribe({
      next: (data) => {
        if (data && data instanceof Array) {
          this.apps = data;
        }
      },
      error: (err) => MessageService.addError(err)
    }));
}

控制台抛出错误：

ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at MyAppsComponent_Template (my-apps.component.html:13:30)

调试发现API返回数据前this.apps的值是undefined，将变量声明改为public apps = [];后报错消失，此时数据返回前apps是一个空数组。疑问：any[]表示元素为any类型的数组，为何声明any[]时apps是undefined而非空数组？

原因解析 #

这是TypeScript中类型声明与变量初始化的本质差异导致的：

• 写public apps: any[];时，仅为变量标注了类型约束——告诉TypeScript这个变量最终应该是一个元素为any的数组，但并没有给变量赋值。在TypeScript/JavaScript的类中，未显式初始化的实例变量默认值就是undefined。
• 而public apps = [];是同时完成了类型推断和初始化：[]是一个空数组，TypeScript会自动推断apps的类型为any[]，同时将变量初始化为空数组。此时API返回数据前，apps是一个有效的数组对象，访问length属性自然不会报错。

简言之：类型声明只是给变量设定类型规则，不会自动生成对应类型的默认值；只有显式赋值操作才会给变量设置初始值。

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