Question

我有这个Flux 商店类：

'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>'.

如何将视图的状态设置为实际的商店类，而不是 AltStore<Store> 类？即如何获取泛型参数的类型，如下所示： state: typeof Store<THIS THING>

Answer 1

state参数只是编译器的类型参数。它在运行时不可用，它就在那里，因此可以对类似setState的方法进行类型检查。但是，从您的代码中，您要导出商店的实例而不是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-style导入。如果它不起作用，您可能需要将其包装在一个返回实例并导出函数的函数中。

如何在Typescript中获取泛型参数的类型？

1 个答案: