React/Flux Dispatcher as Singleton in Typescript

Question

我正在TypeScript中重建Atlassian React-Flux教程（使用来自tsd的React、Flux和Node的绑定），但在实现dispatcher时遇到了一个问题，它本质上是一个单例。

我正在尝试以下方法：

AppDispatcher.ts

export var instance = AppDispatcher.getInstance();
class AppDispatcher extends Flux.Dispatcher<AppPayload> {

    private static _instance:AppDispatcher = new AppDispatcher();

    constructor() {
        super()
        if(AppDispatcher._instance){
            throw new Error("Error: Using this constructor should not be possible...WTH javascript");
        }
        AppDispatcher._instance = this;
    }

    public static getInstance():AppDispatcher
    {
        return AppDispatcher._instance;
    }
...
}

就像在教程中一样，我使用localStorage上的JSON文件来伪造Web API。所以我的ActionCreator执行以下操作：

ActionCreator.ts

import AppDispatcherInstance = require('../dispatcher/AppDispatcher');

//ActionCreator
//In Flux ActionCreators
export function receiveAll(rawNodes:any) {
    AppDispatcherInstance.instance.handleServerAction(AppDispatcherInstance.ActionIdentifier.REFRESH_FROM_SERVER, rawNodes)
}

不幸的是，我得到一个运行时异常Uncaught TypeError：无法读取指向转译的Javascript行的未定义属性“getInstance”

exports.instance = AppDispatcher.getInstance();

1. 我在TypeScript中实现单例错误吗？
2. 有没有更好的方法来做到这一点？我想过根本不写类，只导出某些函数（就像其他SO问题中推荐的那样）到单例，但我仍然想扩展Flux.Dispatcher类？

Answer 1

正如评论所建议的，您需要将使用类的代码移动到该类的声明下方。类只是变量，JavaScript中的变量按顺序初始化。

通常，您不需要在 TypeScript 中使用显式类单例模式。请参阅如何在 TypeScript 中定义单例

class Singleton {
    /* ... lots of singleton logic ... */
    public someMethod() { ... }
}

// Using
var x = Singleton.getInstance();
x.someMethod();

namespace Singleton {
    export function someMethod() { ... }
}
// Usage
Singleton.someMethod();
var x = Singleton; // If you need to alias it for some reason

Answer 2

以下是我在React/Flux项目中如何使用模块的单例：

class AppDispatcher extends Flux.Dispatcher {
    // ...
}

export default new AppDispatcher();

单例可以导入到另一个文件中，例如：

import AppDispatcher from "./AppDispatcher";
AppDispatcher.dispatch(...);

如果您需要导出的类类型，您可以将export添加到class AppDispatcher并以不同的名称导入单例，如果您需要两者在同一个文件中（我倾向于需要这在单元测试中）：

< code >从导入AppDispatcherInstance，{AppDispatcher}。/AppDispatcher"