'ItemIsLoading' on 指的是一种类型，但在这里被用作一个值

Question

我正在为一个 React 项目构建一个打字稿的 Redux 商店。接口似乎工作正常，但是当我尝试在导出本身中传递它们时。我收到以下错误“'ItemIsLoading' on 指的是一种类型，但在这里被用作值”

动作：

import * as constants from '../constants/constantsIndex';

    export interface ItemHasErrored {
        type: constants.ITEMS_HAS_ERRORED;
    }

    export interface ItemIsLoading {
        type: constants.ITEMS_IS_LOADING;
    }

    export interface ItemFetchDataSuccess {
        type: constants.ITEMS_FETCH_DATA_SUCCESS;
    }

    export function itemsFetchData(url: any) {
        return (dispatch) => {
            dispatch(ItemIsLoading(true));

            fetch(url)
                .then((response) => {
                    if (!response.ok) {
                        throw Error(response.statusText);
                    }

                    dispatch(ItemIsLoading(false));

                    return response;
                })
                .then((response) => response.json())
                .then((items) => dispatch(ItemFetchDataSuccess(items)))
                .catch(() => dispatch(ItemHasErrored(true)));
        };
    }

常量：

export const ITEMS_HAS_ERRORED = 'ITEMS_HAS_ERRORED';
export type ITEMS_HAS_ERRORED = typeof ITEMS_HAS_ERRORED;

export const ITEMS_IS_LOADING = 'ITEMS_IS_LOADING';
export type ITEMS_IS_LOADING = typeof ITEMS_IS_LOADING;

export const ITEMS_FETCH_DATA_SUCCESS = 'ITEMS_FETCH_DATA_SUCCESS';
export type ITEMS_FETCH_DATA_SUCCESS = typeof ITEMS_FETCH_DATA_SUCCESS;

目前我只尝试构建 typescript/redux 商店，但似乎找不到任何关于此问题性质的信息。有人会如何解决这个错误？

Answer 1

Interface 在 typescript 中不能被实例化，但是它们可以被扩展。因此，如果您希望使用与接口的类型签名匹配的实例，您应该扩展它。

您可以使用类来实现接口

class ItemIsLoadingAction implements ItemIsLoading {
  payload: boolean;
  constructor(payload) {
    this.payload = payload;
  }
}

然后，您可以使用它的实例来调度操作，例如

dispatch(new ItemIsLoadingAction(false))

这可以适用于其余接口。