Question

我正在尝试通过添加新的Phaser.Physics.Box2D模块来扩展Phaser。内部Phaser已经使用了此模块，但它是一个附加插件，并且我要定义自己的。

我正在为我的项目使用TypeScript。我想用它来以正确的方式扩展移相器。我发现this issue解释了如何添加新的定义（接口），却没有增加代码（实现）。

这是我尝试过的（我也尝试了许多变体）。

// This is part of phaser typescript definitions
// The code I try to add is at the end.
// You can test it on https://www.typescriptlang.org/play/index.html
declare module "phaser-ce" {
    export = Phaser;
}

declare class Phaser {
    static VERSION: string;
    static DEV_VERSION: string;
    static GAMES: Phaser.Game[];
}

declare module Phaser {
    enum blendModes {

        NORMAL,
        ADD,
        MULTIPLY,
        SCREEN,
        OVERLAY,

    }

    class Animation {
        onComplete: Phaser.Signal;
        reverse(): Animation;
        // More of course ...
    }


    class Signal {
        active: boolean;
        // More of course ...
    }

    class Game {
        constructor(width?: number | string, height?: number | string, renderer?: number, parent?: any, state?: any, transparent?: boolean, antialias?: boolean, physicsConfig?: any);
        context: CanvasRenderingContext2D;
        // More of course ...
    }

    class Physics {

        constructor(game: Phaser.Game, config?: any);

        static ARCADE: number;
        static P2JS: number;
        static NINJA: number;
        static BOX2D: number;
        static CHIPMUNK: number;
        static MATTERJS: number;

        arcade: Phaser.Physics.Arcade;
        config: any;
        game: Phaser.Game;
        ninja: Phaser.Physics.Ninja;
        p2: Phaser.Physics.P2;
        box2d: any; // Id like to override this, if you have any good idea I take it :p

    }

    module Physics {

        class Arcade {

        }

        class Ninja {

        }

        class P2 {

        }


        module P2 {

            class Body {

                static DYNAMIC: number;
                static STATIC: number;
                static KINEMATIC: number;
            }
        }
    }
}


// I want to add this class to the Physics module...
class MyAwesomeWork {
    constructor(hello: string) {
        console.log(hello);
    }
}

declare module Phaser {
    module Physics {
        class Box2D {

        }
        module Box2D {
            // ... But this fails :(
            class Body {

            }
        }
    }
}

Phaser.Physics.Box2D = MyAwesomeWork;

Answer 1

您不应该直接修改或扩展外部软件包，因为如果模块被更新，那么您添加的代码将被重写。不幸的是，不可能直接修改库。

大多数开发人员解决此问题的方法是在源代码中编写自己的增强和包装器。这样，您的自定义类就不会被新的npm install重写。

这不是TypeScript独有的，这也适用于JavaScript。可以自己增加类型的唯一原因是因为并非所有包都已键入，并且出于静态类型的考虑，TS假定您更了解。此外，这些类型不在编译后的代码中，因此修改它们对最终产品没有影响。但是，对于实际的可执行代码，TS和JS假定库作者是正确的，从而迫使您将自己的更改放入自己的代码库中。

Answer 2

这是解决方案

import 'phaser-ce';

declare global {
    module Phaser {
        module Physics {
            class Box2D {
                prop: number;
                // Constructor declaration matters
                constructor(param: WhateverType);
            }
        }
    }
}

Phaser.Physics.Box2D = class {
    public prop = 42;
    constructor(private param: WhateverType) {}
};

将类添加到现有模块（外部库）

2 个答案: