Discover the callback function parameter's type in TypeScript

When passing a callback function as a parameter, I find it important to determine the type of this parameter without having to manually define it myself. Is there an easier way to obtain a type alias for this situation, rather than relying on VSCode's inference capabilities?

Perhaps there are methods similar to ReturnType and InstanceType that can assist in identifying the type?

https://i.sstatic.net/21Ts2.png

Answer №1

It is important to accurately infer the type of response:

type AddProfileResponseType = 
  typeof onAddProfileDone extends (cb: (r: infer R) => any) => any 
    ? R 
    : never

If the library provides a specific type for the onAddProfileDone function, it should be used instead of typeof onAddProfileDone.

Interactive Editor


Alternatively:

type AddProfileResponseType = Parameters<Parameters<typeof onAddProfileDone>[0]>[0]

Interactive Playground

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

Eliminate the need to input the complete URL every time when making server calls

Currently, my springbok application has a React-Typescript frontend that is functioning well. I am using the request-promise library to make requests like this: get('http://localhost:8080/api/items/allItems', {json: true}). However, I would like ...

The specified property type 'url' is not recognized on the provided 'Event' type

I came across the error message below [ts] Property type 'url' does not exist on type 'Event'. any This is the TypeScript (JavaScript) code snippet that I am using document.addEventListener("deviceready", onDeviceReady, false); ...

Combining a plain object with a TypeScript class

I am currently working on developing a function that dynamically defines a class extending another class based on a passed object. Here is an example of what I am aiming to achieve: const ObjectMixin = function<T>(obj: T): new () => T { return ...

The Dynamic Duo: Typescript and d3

My app utilizes the d3 library with TypeScript code, and I have encountered an issue. To avoid compiler error TS2686, which occurs when d3 refers to a UMD global in a module file, I need to add the following line: import * as d3 from 'd3'; Howeve ...

Implement Cross-Origin Resource Sharing in Angular frontend

I am facing an issue with two microfrontends running on different ports (4200 and 4201) where one frontend is unable to access the translation files of the other due to CORS restrictions. To overcome this obstacle, I created a custom loader in my code that ...

Turning an array of strings into a multidimensional array

I have a JavaScript string array that I need to convert into a multidimensional array: const names = [ "local://john/doe/blog", "local://jane/smith/portfolio", "as://alexander/wong/resume" ]; The desired output sh ...

The npm crash is caused by Firestore addDoc

My approach to importing firestore looks like this: import { getFirestore, addDoc } from "firebase/firestore"; However, it seems to be causing issues with npm running my react app as it gets stuck during compilation and eventually shows the foll ...

How can I retrieve query parameters in the Server app directory of Next.js 13 using a function?

I am looking to retrieve a query token from localhost/get/point?token=hello. import { NextResponse } from 'next/server' import base64url from 'base64url' type Params = { token: string } export async function GET(req: Request, contex ...

Creating a User-friendly Layout for Admin Pages in Next.js Version 13

Hey there, I'm facing an issue with the layout while using Next.js 13 Experimental App Directory. On my website's index page or routes '/', I want to show a landing page and use a specific layout for all pages except for those under the ...

How can the ChangeDetectorRef be leveraged to identify and respond to changes in component state for seamless integration with the material stepper component

While working with the Angular 8 Material Stepper, I am validating form states and setting stepCompleted to true when the conditions pass. You can view a demo of this functionality on Stackblitz: https://stackblitz.com/edit/angular-mat-stepper-demo-with-f ...

Define an object by extracting properties from an array of objects

Is there a way to refactor this code to remove the need for explicit casting? type A={a:number}; type B={b:string}; let a:A={a:0}; let b:B={b:''}; function arrayToObject<T>(array:T[]):T { return array.reduce((r,c) =>Object.assign ...

Executing a function when a user chooses to exit a webpage using the @HostListener('window:beforeunload') method

Utilizing @HostListener('window:beforeunload') allows me to detect when a user navigates away from the page, prompting a dialog window to open. I wish for an event to be triggered or a method to be executed if the user chooses to leave the page. ...

What causes the "Error: method not allowed" message to appear when attempting to send a "DELETE" request from a Next Js component? (The POST method is

This is my first time on this platform, and I'm currently following a tutorial from Javascript Mastery to create a clone of a thread application. After watching the entire video and building the basic functionality based on it, I decided to enhance th ...

zod - Mastering the Art of Dive Picking

Working with zod and fastify, my UserModel includes the username and device properties. The username is a string, while the device consists of "name", "id", and "verified" fields in an object (DeviceModel). For the sign-up process, I need to return the co ...

The field 'XXX' is not a valid property on the type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'

When creating a Vue component with TypeScript, I encountered an error message in the data() and methods() sections: Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>& ...

A guide on implementing a Type Guard check for an Indexed Property

I am working with a nestedObj type that utilizes an indexed signature like this: type nestedObj = {[key: string]: nestedObj} | {[key: string]: number} How can I go about creating a type guard for this nestedObj type? const isNestedObj = (obj: any): obj ...

Enhance Summernote functionality by creating a custom button that can access and utilize

Using summernote in my Angular project, I am looking to create a custom button that can pass a list as a parameter. I want to have something like 'testBtn': this.customButton(context, listHit) in my custom button function, but I am unsure how to ...

Excessive display of Typescript Alert causing unnecessary interruptions

Why is my button creating multiple alerts when clicked? When I click the Login Button for the first time, the alert shows once. But on clicking it again, the alert shows 2 times. Subsequent clicks increase the alert count accordingly. Furthermore, if I c ...

Encountering a problem when trying to use event.target.value in an Angular TypeScript application

Here is the code from my app.component.html : <h1>Password Generator</h1> <div> <label>Length</label> </div> <input (input)="onChangeLength($event.target.value)"/> <div> <div> <input ...

The document reference is not valid. It must have an equal number of segments, but the reference cities/SF/landmarks has 3 segments

Hello! I am currently learning from the firestore tutorial Initially, they guide me to populate the database with the following data: import { collection, doc, setDoc } from "firebase/firestore"; const citiesRef = collection(db, " ...