如何獲取Typescript中通用參數的類型？

Question

我有這個助焊劑商店課程：

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

Answer 1

state參數只是編譯器的類型參數。 它在運行時不可用，它就在那里，以便可以對諸如setState之類的方法進行類型檢查。 但是，您將從代碼中導出商店的實例，而不是商店類型本身。 因此，您想將其分配給構造函數中的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類定義中的type參數將為您處理。

我不確定要像您在此處那樣從模塊中導出實例，我無法使其正常工作，但我沒有使用require樣式導入。 如果它不起作用，則可能需要將其包裝在一個返回實例並導出該函數的函數中。