'ItemIsLoading' on refers to a type, but is being used as a value here

Question

I am in the process of building a typescripted Redux store for a react project. The Interfaces seem to be working fine, but when I try to pass them within the exports themselves. I receive the following error "'ItemIsLoading' on refers to a type, but is being used as a value here"

Actions:

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)));
        };
    }

Constants:

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;

For the moment I am only attempting to build the typescript/redux store, but cannot seem to find any information on the nature of this issue. How would someone go about resolving this error?

SALEH SALEH · Accepted Answer · 2017-12-13T19:32:18

Interface in typescript can't be instantiated, they can be extended though. So, if you wish to use an instance that matches the type signature of an interface, you should extend it.

You can implement the interfaces using a class

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

Then, you can use it's instance to dispatch the action like

dispatch(new ItemIsLoadingAction(false))

This can be applicable for the rest of the interfaces.

'ItemIsLoading' on refers to a type, but is being used as a value here

1 Answers