有没有办法在 Typescript/Phaser 中访问父 class 的属性？

Question

我有一个继承自 Phaser.GameObjects.Container 的父 class。 在 class 内部有一个自定义 class 信息面板的属性。 该容器有几个 Container 类型的子级。

我正在尝试从低两层的子容器访问主容器中的信息面板： this.parentContainer.parentContainer.informationPanel.setText(text)

它基本上是一个 UI，其中父级是商店，第一个子级是按钮容器，下一个子级是按钮本身。 商店 --> 按钮容器 --> 按钮。

问题是，我得到了错误

“容器”类型上不存在属性“信息面板”

该代码正在运行，但是那里出现错误曲线很烦人，我想知道是否有办法删除它们。

export default class ShopContainer extends Phaser.GameObjects.Container {

    private upgrades!: UpgradeContainer
    
    constructor(scene: Phaser.Scene, x: number, y: number, width: number, height: number, playerMoney: MoneyLabel) {
        super(scene, x, y)

        this.upgrades = new UpgradeContainer(scene, width / 2, 100)
}

export class UpgradeContainer extends Phaser.GameObjects.Container {
    private _buttons!: Array<UpgradeButton>
    .
    .
    .
    public createButton(texture: string, description: string, func: string, label: string, price: number, priceMultiplier: number) {
        let X_OFFSET = 0
        let Y_OFFSET = 0
        const index = this._buttons.length

        if (this.isLandscape) {
            const y_off = 58
            const row = this._buttons.length
            Y_OFFSET = row * y_off
        } else {
            const x_off = 200
            X_OFFSET = -200 + index * x_off
        }

        const button = new UpgradeButton(
            this.scene,
            X_OFFSET,
            Y_OFFSET,
            texture,
            description,
            () => {
                // 1. Subtract money
                this.eventDispatcher.emit('add-money', -button.getPrice())

                // 2. Increase price
                button.increasePrice()

                // 3. Emit upgrade
                this.eventDispatcher.emit(func)
            },
            label,
            price,
            priceMultiplier,
            index
        )

        this._buttons.push(button)
        this.add(button)
}

/**
 * Creates a Upgrade Button that, in addition to the Button functionality, 
 * controls the upgrades availability
 */
export default class UpgradeButton extends Button {
    .
    .
    .
}

export default class Button extends Phaser.GameObjects.Container {

    private func: Function
    private buttonImage: Phaser.GameObjects.Image
    private label: string
    private description: string
    private cost: number

    constructor(scene: Phaser.Scene, x: number, y: number, buttonTexture: string, label: string, description: string, cost:number, event: Function) {
        super(scene, x, y)

        this.func = event
        this.label = label
        this.description = description
        this.cost = cost

        // Create the image
        this.buttonImage = scene.add.image(0, 0, buttonTexture)
            .setOrigin(0.5)
        // Add image to container
        this.add(this.buttonImage)

        // Add the information panel
        this.setSize(this.buttonImage.width, this.buttonImage.height)

        // Add interactive actions
        this.makeInteractive()
    }
    
    useHoverState() {
        this.buttonImage.setTint(EColor.Buttons.Basic.HOVER)
        this.parentContainer.parentContainer.informationPanel.setLabel(this.label) // This is where the error squiggles appear (on .informationPanel)
        this.parentContainer.parentContainer.informationPanel.setDescription(this.description)
        this.parentContainer.parentContainer.informationPanel.setCost(this.cost)
        this.parentContainer.parentContainer.informationPanel.setVisible(true)
    }

Answer 1

我不确定我是否理解您的代码/问题，但您可以这样做来删除曲线：

将 object 铸造成您的自定义class

    let panel = this.parentContainer.parentContainer.informationPanel as InformationPanel;
    panel.setLabel(this.label);
    panel.setDescription(this.description);
    panel.setCost(this.cost);
    panel.setVisible(true);

或者像这样：

let panel = <InformationPanel> this.parentContainer.parentContainer.informationPanel ;

这是更详细地介绍类型转换的有趣链接： https://www.typescripttutorial.net/typescript-tutorial/type-casting/