What is the proper type declaration for incoming data from the backend in my TypeScript code when using axios?

In the TypeScript code snippet provided, the type for 'e' (used in the function for form submission) has been figured out. However, a question arises if this type declaration is correct. Additionally, in the catch block, the type "any" is used for an error. What would be the ideal type for handling errors, and what type should be declared for JSON data received from the backend?

const ResetPassword = async (e : React.FormEvent<HTMLFormElement>) =>  {
        e.preventDefault()
        try {
        if (info.password !== info.confirm_password) {
            toast.error("Password don't match")
        }
        else {
            interface res {
                message : string;
                success : boolean;
            }
            const response = await axios.post('/api/resetpassword',
            {
                token : info.token,
                password : info.password
            })

            const responseData :  res = response.data

            if(responseData.success) {
                toast.success(responseData.message)
                router.push('/login')
            }
            else {
                toast.error(responseData.message)
            }
        }
        } catch (error : any) {
            toast.error("Something went wrong")
        }


    }

Is there a more efficient way to write the above code for better performance?

Answer №1

If you want to utilize both AxiosResponse and AxiosError from the axios library, you need to ensure that you have properly installed the types package @types/axios

import axios, { AxiosResponse, AxiosError } from 'axios';

try {
    const response: AxiosResponse<ExpectedType> = await axios.post('/api/resetpassword', {
        token: info.token,
        password: info.password
    });
} catch (error: AxiosError) {
    // handle error
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preparing my JSON data for visualization on a chart

I have successfully retrieved data using this API, but now I need to transform it into a chart within my react project. As a newcomer to JS and React, I am struggling to create a chart with the JSON data. My objective is to display prices by bedrooms over ...

Setting a dynamic default value for a Combobox using React Widgets

Currently delving into the world of javascript, I am working on creating a web client that showcases data from a database. Utilizing react.js and integrating react-widgets for some user-friendly widgets. One widget in particular, the combobox, pulls its da ...

Having difficulty asserting the dual-function button in both its disabled and enabled states

I have a button that is part of a dual-action setup. This button is disabled until a certain event occurs. Here is the DOM structure while the button is disabled: <div class="doc-buttons"> <a href="#" onclick="actualsize();" id="tip-size" cla ...

Encountering a Forbidden Error with Superagent

Here is the content of my index.js file I am attempting to fetch a response from a sports data API. I can successfully send curl requests to it, but when trying this method, I encounter a 403 forbidden error. var express = require('express'); v ...

Is the size of the JSON file inhibiting successful parsing?

After retrieving a large list of schools with their respective columns from the database, totaling over 1000 rows, I converted it to JSON and passed it to my view. I then attempted to parse it using $.parseJSON('@Html.Raw(Model.subChoiceJsonString)& ...

The issue of NETWORK ERROR cannot be fixed through the use of axios

I'm attempting to communicate with a backend server that is currently offline using axios const backendClient = axios.create({ baseURL : env }); The API call is made here: export const createExpensesRecord = async (createExpenseRecordCmd) => { ...

Turn off all animations for a specific div or HTML page

Whenever I add an item to a div, there's this strange flashing animation happening. It's like a blink or flash that updates the div with new data. I'm not entirely sure if it's a jQuery animation or not. Is there any way to disable all ...

retrieve the source code from all .js links found within the document

There is a file labeled urls.txt. https://website.tld/static/main_01.js https://website.tld/static/main_02.js https://website.tld/static/main_03.js .... All the source code from every .js file in allsource.txt needs to be extracted. Instructions: To ge ...

Using Node JS to pass variables to the client

Currently, I am utilizing Node JS and Express for my server-side needs. In my server-side code, I pass a variable (sources) to my EJS template. Part of this variable is used to populate a list on the webpage. However, when a user clicks on an item in the ...

What methods can be used to block direct attribute updates in a JS/TS class?

class Creature { secretProperty modifySecretProperty(value) { this.secretProperty = value } } new Creature().modifySecretProperty('hidden way') //success new Creature().secretProperty = 'not permitted' // failure To r ...

Using TypeScript to pass objects to an arrow function

Issue at Hand: How do I successfully transfer an object from a parent component to a child component that is derived from the same interface? I am currently facing difficulties in rendering a list of tasks by looping through a list of task objects. The ma ...

Emphasize the close button within the popup window as soon as it appears

One of my coding challenges involves a div element, shown below: <div id="modal" tabindex="-1" ng-show="booleanvariable"></div> When the value of ng-show is true, this div is displayed. A "close" button located under the div should be focused ...

Create a TypeScript function that can be called and has an extended prototype definition

I am seeking to create a callable function foo() (without using the new operator) that will also include a property foo.bar(). The JavaScript implementation would be as follows: function foo() { // ... } foo.prototype.bar = function bar() { // .. ...

Creating Typescript type definitions for any object properties

Struggling to find the correct TS syntax with Typescript 3.7.3. I have a random object, for example: var obj = { one: ..., two: ... three: ... }; I want to create a type that includes all keys from that object, like this: type ObjKeys = &ap ...

Navigating through nested objects using Rxjs

How to Extract Specific Attribute Values from Nested Objects Array using RxJS const obj = { name: 'campus', buildings: [ { name: 'building', floors: [ { name: 'floo ...

Switching between pages and updating the URL without needing to refresh the page, while still maintaining the content even after a refresh

After experimenting with jQuery's load() method to dynamically change content without refreshing the page, I encountered a recurring issue: the URL remains unchanged. Even when attempting to use history.pushState() to modify the URL, the problem pers ...

Troubleshooting Async Function compatibility between Express and NestJs

Initially, I set up a small express server to handle report generation and file writing tasks. var ssrs = require('mssql-ssrs'); var fs = require('fs'); const express = require('express') const app = express() const port = 30 ...

ng-model fails to synchronize with HTML

When I click on ng-click, the model changes but the HTML remains the same... HTML <p>Reserved:<span>{{seatsInfo}}</span></p> <div ng-click="change()">change</div> JavaScript $scope.seatsInfo = 20; $scope.change = fu ...

Angular throwing an error message: "ChildrenOutletContexts provider not found!"

I developed a basic testing application and encountered the error message - "No provider for ChildrenOutletContexts!" I have searched through various related posts but to no avail. Here is my project structure: The App Module contains the App Routing Modu ...

How can you use DOM manipulation to extract input data from an <input type="file"> element?

Is there a way to retrieve the data from an <input type="file"> element, specifically if it contains an image, without utilizing an html form? Here is the HTML code: <body> <input type= "file"> </body> ...