如何在Angular组件中声明需在ngAfterViewInit中赋值后复用的变量

错误原因 #

该错误为TypeScript类型推断导致的问题：初始给map赋值null/undefined时，TS会自动将变量类型推断为null/undefined，后续赋值Map实例时类型不匹配就会抛出对应报错，同时调用this.map.on时TS也会因为变量可能为空抛出类型错误。

解决方案 #

方案1：非空断言修饰符（适合确定变量会在使用前完成初始化的场景） #

使用!修饰符告诉TypeScript该变量一定会被赋值，无需做初始空值赋值和空检查，写法最简单：

// 注意导入你实际使用的Map对应类型，示例为OpenLayers的Map导入方式
import { Map } from 'ol/Map';

export class DummyComponent implements AfterViewInit {
  // ! 表示该变量无需初始赋值，后续会完成初始化
  map!: Map;
  // mousePosition同理按实际类型声明即可
  mousePosition!: [number, number];

  ngAfterViewInit(): void {
    this.map = new Map({
     target: 'map',
     layers: [layer],
     view: view
    });
  }

  update(){ 
    this.map.on(/* 事件逻辑 */)
  }
}

方案2：联合类型+空校验（更安全，避免运行时报错） #

明确声明变量允许的类型为Map或者空值，调用前做非空判断，避免ngAfterViewInit触发前调用方法导致的运行时报错：

import { Map } from 'ol/Map';

export class DummyComponent implements AfterViewInit {
  // 明确声明类型为Map或null
  map: Map | null = null;
  mousePosition: [number, number] | undefined = undefined;

  ngAfterViewInit(): void {
    this.map = new Map({
     target: 'map',
     layers: [layer],
     view: view
    });
  }

  update(){ 
    // 写法1：非空判断后调用
    if (this.map) {
      this.map.on(/* 事件逻辑 */)
    }
    // 写法2：可选链简化调用，空值时直接跳过不会报错
    this.map?.on(/* 事件逻辑 */)
  }
}

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