Using TypeScript with axios and encountering an undefined property

Question

Using TypeScript with axios and encountering an undefined property

Currently, I am encountering an issue while attempting to type the axios response. Here is a glimpse of how the response type appears:

export interface GetBreedsResponse {
  data: {
    message: Breed[]
  }
}

Within my router file, I have implemented the following code:

router.get("/breeds", async (_req: Request, res: Response) => {
  try {
    const apiResponse = await axios.get<GetBreedsResponse>("https://url");
    let breeds : Breed  = await apiResponse.data.message;
    // some code
  }catch (err: unknown) {
    // some code
  }
});

An error occurs indicating that the property message does not exist on GetBreedsResponse. It seems to be related to the fact that message is nested inside the data property, but I am uncertain about how to resolve this.

typescript express axios

Answer 1

Answer №1

RetrieveBreedsResponse is intended to outline the structure of the body in the HTTP response.

The data attribute does not form part of the response body; rather, it is where axios stores the response body.

export interface RetrieveBreedsResponse {
    message: Breed[]
  }
}

TJ highlights that there is an attempt to assign message (Breed[] - an array) to breeds (Breed - not an array), resulting in mismatched types.

Answer 2

RetrieveBreedsResponse is intended to outline the structure of the body in the HTTP response.

The data attribute does not form part of the response body; rather, it is where axios stores the response body.

export interface RetrieveBreedsResponse {
    message: Breed[]
  }
}

TJ highlights that there is an attempt to assign message (Breed[] - an array) to breeds (Breed - not an array), resulting in mismatched types.

Answer 3

Answer №2

There are a couple of key points to consider:

It seems like there's a mismatch between using breeds: Breed and the type of message, which is actually Breed[] (an array). Based on the plural form, it appears that you may have intended to use Breed[].
When specifying the type argument for axios.get (and similar methods), the type refers to the data property within the returned AxiosResponse. Therefore, you should define the desired type as follows:

export interface GetBreedsResponse {
    message: Breed[];
}

By doing this, you won't need to explicitly annotate the type for breeds since it will automatically be inferred as Breed[]:

export interface GetBreedsResponse {
    message: Breed[];
}

router.get("/breeds", async (_req: Request, res: Response) => {
    try {
        const apiResponse = await axios.get<GetBreedsResponse>("https://url");
        let breeds = await apiResponse.data.message;
        // your code logic here
    } catch (err: unknown) {
        // error handling logic here
    }
});

Answer 4

There are a couple of key points to consider:

It seems like there's a mismatch between using breeds: Breed and the type of message, which is actually Breed[] (an array). Based on the plural form, it appears that you may have intended to use Breed[].
When specifying the type argument for axios.get (and similar methods), the type refers to the data property within the returned AxiosResponse. Therefore, you should define the desired type as follows:

export interface GetBreedsResponse {
    message: Breed[];
}

By doing this, you won't need to explicitly annotate the type for breeds since it will automatically be inferred as Breed[]:

export interface GetBreedsResponse {
    message: Breed[];
}

router.get("/breeds", async (_req: Request, res: Response) => {
    try {
        const apiResponse = await axios.get<GetBreedsResponse>("https://url");
        let breeds = await apiResponse.data.message;
        // your code logic here
    } catch (err: unknown) {
        // error handling logic here
    }
});

Using TypeScript with axios and encountering an undefined property

Answer №1

Answer №2

Similar questions

Output a .twig file using Twig.js

The name 'XXX' is nowhere to be found

Creating dynamic Angular child routes with variable initial segment

Retrieving the name of the currently active express middleware function

When Mongo Meets Express

Unable to retrieve notes(data) from API using the user ID

Can you determine the base class type based on the derived class?

Developing a Liferay 7.0 portlet using Angular and TypeScript

Countdown component in Ant Design failing to display correct date

Extract an array from a JSON array based on the lowest value of the keys

The type 'string | undefined' cannot be assigned to type 'string'

What is preventing the availability of those array extensions during runtime?

Angular: use an icon in place of text

What is the correct way to configure the environment variables for the vscode plugin?

The middleware in ExpressJs does not seem to function properly following its import

What is the best way to transfer the API Response Time from one Fetch function to a separate asynchronous function?

Displaying an ejs file on the client's side

Sequelize error: the defineCall method is not found in the Index.js file

Is there a beginner's pack or trial version available for utilizing TypeScript with IBM Cloud Functions / OpenWhisk?

The error message, "Property 'message' is not found on type 'ErrorRequestHandler<ParamsDictionary, any, any, ParsedQs, Record<string, any>>.ts(2339)", indicates that the requested property is not present in the specified type