React + TypeScriptにおけるreducerの型エラーについて

Question

前提・実現したいこと

reducerの型エラー解消

ここに質問の内容を詳しく書いてください。
React + TypeScriptでreducerを実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

switch文のcaseのreturnでエラーが発生しています。

型 'StateType | { title: string; body: string; id: number | StateType; }' を型 'StateType' に割り当てることはできません。
  型 '{ title: string; body: string; id: number | StateType; }' を型 'StateType' に割り当てることはできません。
    プロパティ 'id' の型に互換性がありません。
      型 'number | StateType' を型 'number' に割り当てることはできません。
        型 'StateType' を型 'number' に割り当てることはできません。

型 'number | StateType' を型 'number' に割り当てることはできません。
  型 'StateType' を型 'number' に割り当てることはできません。

該当のソースコード

type StateType = { id: number; title: string; body: string };
type ActionType = {
  type: "CREATE_EVENT" | "DELETE_EVENT" | "DELETE_ALL_EVENT";
  title: string;
  body: string;
};

const events = (state: StateType[] = [], action: ActionType): StateType[] => {
  switch (action.type) {
    case "CREATE_EVENT":
      const event = { title: action.title, body: action.body };
      const length = state.length;
      const id = length === 0 ? 1 : state[length - 1].id + 1;
      return [...state, { id, ...event }];

    default:
      return state;
  }
};

export default events;

試したこと

const id = length === 0 ? 1 : state[length - 1];の型推論がconst id: StateType | 1となっており、この部分が原因だと推測しました。
StateTypeの型定義を以下に変更したところエラーは消えました。

type StateType = { id: number | StateType; title: string; body: string };

この解決方法に違和感を感じており、もっと良いエラー解消の記述方法があればご教示いただきたいです。
よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

React: ver17.0.2
Typescript: ver4.1.2

Comments

[hoshi-takanori]

やりたいことは
const id = length === 0 ? 1 : state[length - 1].id + 1;
では？ (削除した id が再利用されるのはどうかという気もしますが…。)

[bdapt]

申し訳ございません。ご指摘いただいたとおりです。
記述修正したところ、解決いたしました。
ありがとうございます。

Answer 1

const id = length === 0 ? 1 : state[length - 1].id + 1;

上記の記述に変更