refactor: add typescript definition and fix some type error

src/app/slices/channels.ts

@@ -1,11 +1,15 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import BASE_URL from '../config';
-import { getNonNullValues } from '../../common/utils';
-import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from '../../types/channel';
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import BASE_URL from "../config";
+import { getNonNullValues } from "../../common/utils";
+import { Channel, UpdateChannelDTO, UpdatePinnedMessageDTO } from "../../types/channel";
+
+interface StoredChannel extends Channel {
+  icon: string;
+}
 
 interface State {
   ids: number[];
-  byId: { [id: number]: Channel | undefined };
+  byId: { [id: number]: StoredChannel | undefined };
 }
 
 const initialState: State = {
@@ -23,16 +27,15 @@ const channelsSlice = createSlice({
     fullfillChannels(state, action: PayloadAction<Channel[]>) {
       const channels = action.payload || [];
       state.ids = channels.map(({ gid }) => gid);
-      state.byId = Object.fromEntries(
-        channels.map((c) => {
-          const { gid, avatar_updated_at } = c;
-          c.icon =
-            avatar_updated_at == 0
-              ? ''
-              : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`;
-          return [gid, c];
-        })
-      );
+      channels.forEach((c) => {
+        state.byId[c.gid] = {
+          ...c,
+          icon:
+            c.avatar_updated_at == 0
+              ? ""
+              : `${BASE_URL}/resource/group_avatar?gid=${c.gid}&t=${c.avatar_updated_at}`
+        };
+      });
     },
     addChannel(state, action: PayloadAction<Channel>) {
       const ch = action.payload;
@@ -44,26 +47,23 @@ const channelsSlice = createSlice({
         ...ch,
         icon:
           avatar_updated_at == 0
-            ? ''
+            ? ""
             : `${BASE_URL}/resource/group_avatar?gid=${gid}&t=${avatar_updated_at}`
       };
     },
     updateChannel(state, action: PayloadAction<UpdateChannelDTO>) {
-      const ignoreInPublic = ['add_member', 'remove_member'];
+      const ignoreInPublic = ["add_member", "remove_member"];
       const { gid, operation, members = [], ...rest } = action.payload;
       const currChannel = state.byId[gid];
-      if (
-        !currChannel ||
-        (currChannel.is_public && ignoreInPublic.includes(operation))
-      ) return;
+      if (!currChannel || (currChannel.is_public && ignoreInPublic.includes(operation))) return;
       switch (operation) {
-        case 'remove_member': {
+        case "remove_member": {
           state.byId[gid]!.members = state.byId[gid]!.members.filter(
             (id) => members.findIndex((uid) => uid == id) == -1
           );
           break;
         }
-        case 'add_member': {
+        case "add_member": {
           const currs = state.byId[gid]!.members;
           const _set = new Set([...currs, ...members]);
           state.byId[gid]!.members = Array.from(_set);