2

私はこの Flux Storeクラスを持っています:

'use strict';
import flux = require('app/tools/flux');
import types = require('app/tools/types');
import Actions = require('app/actions/actions');

class Store
{
    bindListeners(config : any) : void {;};
    books : Array<types.IBook>;
    selectedBookName : string;

...
}

export = flux.createStore<Store>(Store, 'Store');

それはこのビューで使用されています:

"use strict";
import React = require('react');
import Store = require('app/stores/store'); // <-- here we import the Store
import _ = require('lodash');
import BookHelper = require('app/tools/bookHelper');
import Msg = require('app/tools/messages');

interface props {}
interface state {}

class NoteContainer extends React.Component<props, state>
{
    state: typeof Store; // <-- this is Altjs<Store>, not Store :(

    render()
    {
        if (!this.state.selectedBookName)  // <-- here's an error
            return;
...

これにより、コンパイルエラーが発生します。

error TS2339: Property 'selectedBookName' does not exist on type 'AltStore<Store>'.

ビューの状態をクラスではなく実際のStoreクラスに設定するにはどうすればよいAltStore<Store>ですか? つまり、次のように、ジェネリック パラメーターの型を取得するにはどうすればよいですか。 state: typeof Store<THIS THING>

4

1 に答える 1

0

状態パラメーターは、コンパイラの単なる型パラメーターです。実行時には使用できません。setState などのメソッドを型チェックできるようにするためだけに存在します。ただし、コードから、 Store タイプ自体ではなく、ストアのインスタンスをエクスポートしています。したがって、それをコンストラクターの状態プロパティに割り当てます。また、状態のタイプはプレーンな JS オブジェクトである必要があることにも注意してください。React は実行時に状態オブジェクトで Object.assign を使用しますが、プレーン オブジェクトでない場合は問題が発生します。そのように：

import storeInstance = require('app/stores/store');

interface StateType {
    store: AltStore<Store>;
}
class NoteContainer extends React.Component<PropsType, StateType>
{
    constructor(props: PropsType) {
        super(props);
        this.state = {store: storeInstance};
    }

また、状態プロパティの型を指定する必要がないことにも注意してください。Component クラス定義の型パラメーターがそれを処理します。

ここで行っているように、モジュールからインスタンスをエクスポートすることについて 100% 確信があるわけではありません。それを機能させることはできませんでしたが、require スタイルのインポートは使用していません。うまくいかない場合は、インスタンスを返す関数でラップし、関数をエクスポートする必要がある場合があります。

于 2015-12-26T14:33:47.580 に答える