Свойство не существует для типа в редуктор Redux с использованием TypeScript?

Question

Я пытаюсь использовать Redux с TypeScript в небольшом учебном проекте, следуя этому уроку: https://redux.js.org/recipes/usage-with-typescript/

const INITIAL_STATE: TweetsState = {
  tweets: []
};

const tweetsReducer: Reducer<TweetsState> = (
  state = INITIAL_STATE,
  action: TweetAction
): TweetsState => {
  switch (action.type) {
    case GET_TWEETS:
      return {
        ...state
      };

    case TWEETS_RECEIVED:
      return {
        tweets: [...state.tweets, action.payload]
      };

    default:
      return state;
  }
};

Мой редуктор ожидает действие типа TweetAction, которое объединение двух интерфейсов:

export interface IGetTweetsAction {
  type: typeof GET_TWEETS;
}

export interface ITweetsReceivedAction {
  type: typeof TWEETS_RECEIVED;
  payload: ITweet[];
}

export const GET_TWEETS: string = "GET_TWEETS";
export const TWEETS_RECEIVED: string = "TWEETS_RECEIVED";

export type TweetAction = IGetTweetsAction | ITweetsReceivedAction;

Однако внутри моего редуктора я получаю ошибку Property 'payload' does not exist on type 'TweetAction', которая сбивает с толку, поскольку предполагает, что объединение не сработало?

Но это еще больше сбивает с толку, потому что в моем файле действий он явно позволяет мне возвращать объект типа TweetAction с полезной нагрузкой:

import {
  TweetAction,
  GET_TWEETS,
  TWEETS_RECEIVED,
  ITweet
} from "./tweets.types";

export const getTweets = (): TweetAction => ({
  type: GET_TWEETS
});

export const tweetsReceived = (tweets: ITweet[]): TweetAction => ({
  type: TWEETS_RECEIVED,
  payload: tweets
});

Я знаю, что код в настоящее время немного беспорядок (иногда я инстинктивно префикс взаимодействует с тем, что я являюсь C# dev, извините!), поскольку я еще не прошел стадию рефакторинга, поскольку я просто пытаюсь быстро что-то поднять, но я был озадачен этой ошибкой.

Кто-нибудь может увидеть, что идет не так? Возможно, это что-то прямолинейное, но изоляция, возможно, дошла до моей головы.

Спасибо!

Редактировать: Обратите внимание, что удаление безопасности типов и изменение: с action: TweetAction на action позволяет мне сделать action.payload и функционал работает нормально ...

Answer 1

- редактировать -----

ОК Итак, очевидно, вам нужно убрать : string, набрав в этих строках:

export const GET_TWEETS: string = "GET_TWEETS";
export const TWEETS_RECEIVED: string = "TWEETS_RECEIVED";

- / edit ---- -

Я тоже новичок в машинописи, но, насколько я понимаю, поскольку вы используете action.payload в своем редукторе, тип TweetAction не принимается, поскольку он может подразумевать тип IGetTweetsAction, который не определяет свойство payload.

Вам нужно использовать более общий тип c, например: type TweetAction { type: // ..., }

, чтобы сказать, что вы можете иметь действие, которое всегда будет иметь type и может иметь некоторые другие реквизиты (например, payload).

Что касается вашего запутанного примера, я думаю, что на самом деле имеет смысл:

export const getTweets = (): TweetAction => ({
  type: GET_TWEETS
});

Нет payload определено так, что оно соответствует IGetTweetsAction.

export const tweetsReceived = (tweets: ITweet[]): TweetAction => ({
  type: TWEETS_RECEIVED,
  payload: tweets
});

, в то время как это соответствует ITweetsReceivedAction.