Type 'string[]' is not assignable to type 'never[]'. Typescript Error

Question

I'm currently using Next.js and TypeScript and I'm confused on the error message I'm getting here. Here's some context to the situation. I'm making an API call and I'm receiving an Object of arrays.

const fetchDogBreeds = async () => {
      const res: any = await axios.get("https://dog.ceo/api/breeds/list/all");
      const data: any = res.data.message;
      setDogBreeds(
        Object.entries(data).map(
          (breed:any) => breed[0].charAt(0).toUpperCase() + breed[0].substring(1)
        )
      );
    };

The code runs fine but I'm getting this TypeScript Error and I don't understand what it means. Error:

Argument of type 'string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
  Type 'string[]' is not assignable to type 'never[]'.

I'm a little new to TypeScript so I'm a little confused how to get this error to go away. Thanks in advance!

What's the line which gives an error? I guess that it is generated on setDogBreeds; if it's correct, then how it is defined? — Cerberus
– Cerberus, Commented Feb 28, 2022 at 3:24

Manu Jo Varghese · Accepted Answer · 2022-02-28 01:35:02Z

2

All you have to do is to define the type of res array like this

const res: string[] = await axios.get("https://dog.ceo/api/breeds/list/all");

Without assigning the type of array it will be default set as never

answered Feb 28, 2022 at 1:35

Manu Jo Varghese

4001 silver badge15 bronze badges

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

1 Comment

Eric Pezzulo Over a year ago

I then get Property 'data' does not exist on type 'string[]'. Is that because its returning an object of arrays instead of an array of objects?

vamsiampolu · Accepted Answer · 2022-02-28 02:14:53Z

0

Add the response type to axios.get, this will be passed on as the type of response.data.

export interface DogBreeds {
  message: Record<string, string[]>;
}

const fetchDogBreeds = async () => {
  const res = await axios.get<DogBreeds>("https://dog.ceo/api/breeds/list/all");

  const data = res.data.message;

  // call setDogBreeds and do other stuff. 
}

Also you need to supply the correct parameters to map:

Object.entries(data).map(([key, value]: string[]) => {});

answered Feb 28, 2022 at 2:14

vamsiampolu

6,74420 gold badges90 silver badges195 bronze badges

2 Comments

Eric Pezzulo Over a year ago

That gives me this: Argument of type 'string[]' is not assignable to parameter of type 'SetStateAction<never[]>'. Type 'string[]' is not assignable to type 'never[]'. Type 'string' is not assignable to type 'never'.

vamsiampolu Over a year ago

I think you need to provide a type argument to SetStateArg<string[]> when creating setDogBreeds. I've not used react hooks, so I'm not sure about the types there.

Eric Pezzulo · Accepted Answer · 2022-03-01 20:28:15Z

0

I changed the code to this:

const fetchDogBreeds = async () => {
      const res = await axios.get("https://dog.ceo/api/breeds/list/all");
      const data = res.data.message;
      const listOfDogBreeds: any = Object.entries(data).map(
        (breed: any) => breed[0].charAt(0).toUpperCase() + breed[0].substring(1)
      );
      setDogBreeds(listOfDogBreeds);
    };

and I'm not getting anymore TypeScript errors

answered Mar 1, 2022 at 20:28

Eric Pezzulo

4092 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Type 'string[]' is not assignable to type 'never[]'. Typescript Error

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related