类型脚本如何连接要在交换机中使用的枚举值

ee7vknir  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(170)

我有以下类型的贴花:

export type CrudGetAction<Type, Action> = {
    type: Action;
    payload: {
        data: Type[];
        total: number;
        offset: number;
    };
};

export type CrudGetActionInit<Action> = {
    type: Action;
};

那些枚举呢

export enum CRUD_TYPES {
    CATEGORY = 'category',
}
export enum ACTION_TYPES {
    LOG_OUT = 'LOG_OUT',
    INIT_AUTHENTICATE_CHECK = 'INIT_AUTHENTICATE_CHECK',
    PERFORMED_AUTHENTICATED_CHECK = 'PERFORMED_AUTHENTICATED_CHECK',
    LOGIN_INIT = 'LOGIN_INIT',
    LOGIN_SUCCESS = 'LOGIN_SUCCESS',
    AUTHENTICATE_ERROR = 'AUTHENTICATE_ERROR',
    GET_PROFILE_SUCCESS = 'GET_PROFILE_SUCCESS',
    SET_BACKGROUND_COLOR = 'SET_BACKGROUND_COLOR',
    ADD_CRUD_ = 'ADD_CRUD_',
    DELETE_CRUD_ = 'DELETE_CRUD_',
    GET_CRUD_INIT_ = 'GET_CRUD_INIT_',
    GET_CRUD_SUCCESS_ = 'GET_CRUD_SUCCESS_',
    UPDATE_CRUD_ = 'UPDATE_CRUD_',
    GET_CRUD_SINGLE_ = 'GET_CRUD_SINGLE_',
    CRUD_REFRESH_ = 'CRUD_REFRESH_',
    CRUD_ERROR_ = 'CRUD_ERROR_',
}

我正在尝试将redux reducer转换为typescript

export const crud = (name: CRUD_TYPES, appendToInitial = {}) => {
    const initialState: CrudInterface<ICategory> = {
        data: [],
        single: {},
        total: 0,
        offset: 0,
        isFetching: false,
        error: false,
        refreshing: false,
    };

    type Actions =
        | CrudGetAction<
              ICategory,
              `${ACTION_TYPES.GET_CRUD_SUCCESS_}${typeof name}`
          >
        | CrudGetActionInit<`${ACTION_TYPES.GET_CRUD_INIT_}${typeof name}`>;

    return function counter(
        state = { ...initialState, ...appendToInitial },
        action: Actions,
    ) {
        switch (action.type) {
            // this one works as expected
            case 'GET_CRUD_SUCCESS_category':
                return {
                    ...state,
                    isFetching: false,
                    data: action.payload.data.reduce((accumulator, current) => {
                        // @ts-ignore
                        accumulator[current.id] = current;
                        return accumulator;
                    }, {}),
                    total: action.payload.total,
                    offset: action.payload.offset,
                    refreshing: false,
                };
            //this one does not 
            case `${ACTION_TYPES.GET_CRUD_SUCCESS_}${name}`:
                return {
                    ...state,
                    isFetching: false,
                    data: action.payload.data.reduce((accumulator, current) => {
                        // @ts-ignore
                        accumulator[current.id] = current;
                        return accumulator;
                    }, {}),
                    total: action.payload.total,
                    offset: action.payload.offset,
                    refreshing: false,
                };
            default:
                return state;
        }
    };
};

actions.type的类型为:

type: "GET_CRUD_SUCCESS_category" | "GET_CRUD_INIT_category"

不起作用的会抛出错误

 Property 'payload' does not exist on type 'CrudGetActionInit<"GET_CRUD_INIT_category">'.

我每次尝试将其用作动态值时都会抛出此错误,是否可以将其设置为示例中的第二种情况有效?

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题