I have a problem with a type unknown in typescript

Question

It's my first time using typescript and I'm getting a problem with the variable called "state" as it's use to get my list of users form the api but I get this error "'state' is of type 'unknown'" even though it actually works. As I said it's my first time with typescript and I dontu fully understand why it works if it has an error.

//React Imports
import React, { useEffect } from "react";
//MUI Imports
import Navbar from "../../Components/Navbar";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { CardMedia } from "@mui/material";
import Typography from "@mui/material/Typography";
//Redux Imports
import { fetchAllUsers } from "../../redux/slices/users";
import { useDispatch, useSelector } from "react-redux";

function Users() {
  const { list: users } = useSelector((state) => state.users);//Error in state.users

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchAllUsers() as any);
  }, [dispatch]);

  return (
    <div className="Users">
      <Navbar></Navbar>
      <br></br>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={2} alignItems="center" justifyContent="center">
          {users.map((user, index) => (
            <Grid item xs={3.1}>
              <Card>
                <CardMedia
                  component="img"
                  image={user.avatar}
                  alt="avatar image"
                ></CardMedia>
                <CardContent>
                  <Typography gutterBottom variant="h5">
                    {user.first_name} {user.last_name}
                  </Typography>
                  <Typography gutterBottom variant="h6">
                    {user.email}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Box>
    </div>
  );
}

export default Users;

Does this answer your question? React-Redux useSelector typescript type for state — Marcus Dunn
– Marcus Dunn, Commented Oct 27, 2022 at 8:44

Daniel Smith · Accepted Answer · 2022-10-27 08:42:27Z

1

  const { list: users } = useSelector((state:SPECIFYTYPEHERE) => state.users);//Error in state.users

You need to specify the type of state after the colon in typescript otherwise the state will be inferred as unknown.

answered Oct 27, 2022 at 8:42

Daniel Smith

1898 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sharan Balakrishnan · Accepted Answer · 2022-10-27 08:45:48Z

1

You have to either include type definition for state in here (which you've probably written in the reducer part) or you can use conditional chaining state!.users or state!.users or you can give any as the type to state (state:any)

answered Oct 27, 2022 at 8:45

Sharan Balakrishnan

3781 silver badge10 bronze badges

Collectives™ on Stack Overflow

I have a problem with a type unknown in typescript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related