Getting Property map doest not exist on Array

Question

I am using redux with react typescript. I have an external JSON that contains employee data based on the department id. to map the data with type in my app I created some types.

Here is a demo sandbox

This is what my external JSON file structure looks like:

{
    "0": [
    { "id": 0, "name": "test", "age": 20 },
    { "id": 3, "name": "test", "age": 20 },
    { "id": 4, "name": "test", "age": 20 }
  ],
  "1": [
    { "id": 0, "name": "test", "age": 20 },
    { "id": 1, "name": "test", "age": 20 }
  ]
}

This is my departmentSlice.ts Here I mapped my external JSON data with deparmentData because my external data structure is the same as department type.

type employee = {
  id: number,
  name: string,
  age: number
}

type department = {
  [deparmentId: string]: employee[]

}

const departmentData:department = require("../data.json");


const departmentSlice = createSlice({
  name: 'department',
  initialState: departmentData,
  reducers: {
  // empty
}
});

export const departmentReducer = departmentSlice.reducer;

I left the reducers code empty because currently, I am testing the initial state.

Here, is my Index.tsx Code

const store = configureStore({
  reducer: {
    department: departmentReducer
  }
});

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

Now In my App.tsx

import { useSelector } from "react-redux";
import { useEffect } from "react";

type employee = {
  id: number;
  name: string;
  age: number;
};

type department = {
  [deparmentId: string]: employee[];
};

export default function App() {
  const dept: department = useSelector((state: department) => state);

  useEffect(() => {
    console.log(dept.department);
    console.log(dept.department[0]);
    // dept.department[0].map((x: employee) => {

    // });
  });

  return (
    <div className="App">
      
    </div>
  );
}

Now for testing purposes, I am simply using the useEffect to print data

I am getting all the data of department 0 in an array of object forms. Now I am trying to use a map on department 0 like below:

It says: Property 'map' does not exist on type 'employee'. even though on browsers it's printing as an array of objects.

Answer 1

The problem seems to be that the state value coming from the store on following line:

useSelector((state: department) => state.department);

is not of type department but is actually an object with a property named department which is of type department:

{
  department: {
    "0": [
          {id: 0, name: "test", age: 20},
          {id: 0, name: "test", age: 20},
    ],
    "1": [
          {id: 0, name: "test", age: 20},
          {id: 0, name: "test", age: 20},
    ]
  }
}

If you change your useSelector statement to:

const dept: department = useSelector((state: { department: object }) => state.department);

and change the console.log statements in useEffect to:

useEffect(() => {
    console.log(dept);
    console.log(dept[0]);
    dept[0].map((x: employee) => {
      console.log("employee", x);
    });
  });

then this should work and not show any compile errors. There's a working demo here: https://codesandbox.io/s/react-typescript-forked-7pz7n1?file=/src/App.tsx