TS2769: No overload matches this call

Только начал изучать TypeScript и столкнулся с такой ошибкой:

Overload 1 of 3,
(thunkAction: ThunkAction<unknown, { globalState: State; }, unknown, ActionsTypes>): unknown
, gave the following error.
Argument of type
{     type: string;     payload: {         titlle: string;     }; }
is not assignable to parameter of type
ThunkAction<unknown, {     globalState: State; }, unknown, ActionsTypes>
Type
{     type: string;     payload: {         titlle: string;     }; }
provides no match for the signature
(dispatch: ThunkDispatch<{ globalState: State; }, unknown, ActionsTypes>, getState: () => { globalState: State; }, extraArgument: unknown): unknown
Overload 2 of 3, (action: ActionsTypes): ActionsTypes, gave the following error.
Argument of type
{     type: string;     payload: {         titlle: string;     }; }
is not assignable to parameter of type ActionsTypes
Type
{     type: string;     payload: {         titlle: string;     }; }
is not assignable to type setActiveNoteType
Types of property type are incompatible.
Type string is not assignable to type "SETACTIVEFRAME"
Overload 3 of 3,
(action: ActionsTypes | ThunkAction<unknown, { globalState: State; }, unknown, ActionsTypes>): unknown
, gave the following error.
Argument of type
{     type: string;     payload: {         titlle: string;     }; }
is not assignable to parameter of type
ActionsTypes | ThunkAction<unknown, {     globalState: State; }, unknown, ActionsTypes>
Type
{     type: string;     payload: {         titlle: string;     }; }
is not assignable to type setActiveNoteType 

Это код редюсера моего React приложения:

import { ThunkAction } from 'redux-thunk'
import { ThunkDispatch } from 'redux-thunk'
import { StateType } from "./Redux-store";

type Frame = {
    titlle: string;
    text: string | null;
};

export type State = {
    frames: Frame[];
    isCreateBlank: boolean;
    activeFrame: number;
};

export const setFrame = (titlle: string) => ({ type: 'SETFRAME', payload: { titlle } });
export const isCreateBlankFalse = () => ({ type: 'ISCREATEBLANKFALSE' });
export const isCreateBlankTrue = () => ({ type: 'ISCREATEBLANKTRUE' });
export const setActiveNote = (id: number) => ({ type: 'SETACTIVEFRAME', payload: { id } });

type setFrameActionType = {
    type: 'SETFRAME';
    payload: { titlle: string };
};

type setActiveNoteType = {
    type: 'SETACTIVEFRAME';
    payload: { id: number };
};

type isCreateBlankType = {
    type: 'ISCREATEBLANKFALSE' | 'ISCREATEBLANKTRUE';
};

export let initialState: State = {
    frames: [],
    isCreateBlank: false,
    activeFrame: 0
};

export type ActionsTypes = setFrameActionType | isCreateBlankType | setActiveNoteType;

export let globalReduser = (state: State = initialState, action: ActionsTypes): State => {
    switch (action.type) {
        case "SETFRAME":
            return {
                ...state,
                frames: [...state.frames, { titlle: action.payload.titlle, text: null }]
            };

        case "ISCREATEBLANKFALSE":
            return {
                ...state,
                isCreateBlank: false
            };

        case "SETACTIVEFRAME":
            return {
                ...state,
                activeFrame: action.payload.id
            };

        case "ISCREATEBLANKTRUE":
            return {
                ...state,
                isCreateBlank: true
            };

        default:
            return state;
    }
};

export type ThunkSetFrameType = ThunkAction<Promise<void>, StateType, unknown, ActionsTypes>;
export type AppDispatch = ThunkDispatch<StateType, unknown, ActionsTypes>;

export const setFrameThunk = (titlle: string): ThunkSetFrameType => {
    return async (dispatch: AppDispatch, getState: () => StateType) => {
        dispatch(setFrame(titlle));
        dispatch(isCreateBlankFalse());
    };
};

И вот код Redux-Store.ts:

import { configureStore, combineReducers } from "@reduxjs/toolkit"
import { globalReduser } from "../Redux/GReduser"


let reducers = combineReducers({
    globalState: globalReduser
})

export let store = configureStore({reducer: reducers})

export type DispatchType = typeof store.dispatch
export type StateType = ReturnType<typeof store.getState>

Не могу понять что здесь не так


Ответы (1 шт):

Автор решения: Павел Ериков stand with Russia

Функции setFrame и isCreateBlankFalse на выходе у поля type имеют тип string. Функция dispatch ожидает конкретный type какой определен у конкретного типа в типе ActionTypes.

Можно этим функциям явно указать тип возвращаемого значения:

export const setFrame = (titlle: string): setFrameActionType => ({ type: 'SETFRAME', payload: { titlle } });
export const isCreateBlankFalse = (): isCreateBlankType => ({ type: 'ISCREATEBLANKFALSE' });

Или к строкам написать as const.

→ Ссылка