Pixi.js中addEventListener报错：TypeScript提示对象可能为undefined

错误原因 #

Pixi.js的Application类型定义里，view属性被声明为HTMLCanvasElement | undefined——这是因为初始化时如果不传入view参数，Pixi会自动创建一个canvas元素；但即使你手动传入了有效的canvas，TypeScript编译时无法通过代码逻辑确认app.view一定非空，所以抛出了Cannot invoke an object which is possibly 'undefined'错误。

解决方法 #

有三种常用的处理方式，可根据场景选择：

1. 非空断言（最简洁）

直接在app.view后添加!，明确告诉TypeScript该值不会是undefined：

app.view!.addEventListener('mouseup', (e) => {
  // ... 你的逻辑
});

注意：只有当你100%确认app.view一定存在时才用这个方法，否则运行时可能出错。

2. 类型守卫（最安全）

先判断app.view是否存在，再执行事件绑定：

if (app.view) {
  app.view.addEventListener('mouseup', (e) => {
    // ... 你的逻辑
  });
}

这种方式完全符合TypeScript的类型检查规则，即使极端情况下app.view为空，也不会触发运行时错误。

3. 显式类型断言

把app.view断言为HTMLCanvasElement，明确指定其类型：

(app.view as HTMLCanvasElement).addEventListener('mouseup', (e) => {
  // ... 你的逻辑
});

效果和非空断言类似，但更强调类型的准确性，适合需要明确类型的场景。

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