2

我有这个通量商店课程：

'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

state 参数只是编译器的类型参数。它在运行时对您不可用，它只是在那里，以便可以对 setState 之类的方法进行类型检查。但是，从您的代码中，您导出的是 store 的一个实例，而不是 Store 类型本身。因此，您希望将其分配给构造函数中的 state 属性。另请注意，状态类型必须是纯 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};
    }

另请注意，您不需要指定 state 属性的类型，Component 类定义中的类型参数会为您处理。

我不能 100% 确定要像您在这里所做的那样从模块中导出实例，我无法让它工作，但我没有使用 require 样式的导入。如果它不起作用，您可能需要将其包装在一个返回实例并导出该函数的函数中。

于 2015-12-26T14:33:47.580 回答