TypeScript中如何扩展使用对象参数解构构造函数的类

问题原因&解决方案 #

你写的子类继承结构本身没有语法错误，不生效通常是以下几个原因导致： #

1. 调用时机错误

ThreeJSOverlayView 实例的 camera 属性会在 overlay 被添加到地图、触发 onAdd 生命周期钩子后才完成初始化。如果你在实例化后立刻调用 getCameraMatrices 方法，此时 camera 还未赋值，会得到 undefined 报错。
你需要在 onAdd 钩子触发后再调用自定义方法：

// 实例化自定义overlay
const myOverlay = new CustomThreeOverlay({
  map: yourMapInstance, // 传入你的谷歌地图实例
  anchor: { lat: 39.9, lng: 116.3, altitude: 100 },
  // 其余你需要的配置参数
})

// 等待overlay加载完成后再调用方法
myOverlay.onAdd = () => {
  const projectionMatrix = myOverlay.getCameraMatrices()
  console.log(projectionMatrix)
}

2. 类型定义校验报错

如果你在编译阶段收到 camera 属性不可访问的报错，先确认你安装的 @googlemaps/three 包版本的类型定义中，camera 是 protected 修饰符（官方最新版本默认是 protected 可被子类访问）。如果是类型定义异常，可以临时用类型断言绕过校验：

getCameraMatrices(): Matrix4 {
  // 类型断言绕过访问权限校验，仅临时方案，建议优先升级包到官方最新版本
  return (this as any).camera.projectionMatrix
}

最终可直接使用的完整实现

你可以删掉子类中无额外逻辑的构造函数，TS会自动生成默认构造函数调用父类的super方法，代码更简洁：

import { ThreeJSOverlayView, ThreeJSOverlayViewOptions } from '@googlemaps/three';
import { Matrix4 } from 'three';

export class CustomThreeOverlay extends ThreeJSOverlayView {
  getCameraMatrices(): Matrix4 | null {
    // 增加非空判断避免camera未初始化时抛出运行时错误
    return this.camera?.projectionMatrix ?? null
  }
}

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