Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

Question

Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

I am working on an interface with the following structure:

interface Res<R = any> {
    first?(): Promise<R>;
    second(arg: { response: R }): void;
}

However, I noticed that when creating a plain object based on this interface, the response type is not inferred correctly. Here's an example:

const entity: Res = {
    first: () => Promise.resolve({ name: 'Bob' }),
    second: (arg) => {
        console.log(arg.response) // currently inferred as "any", but should be "{ name: string }"
    }
}

Is it feasible to obtain the correct type for arg.response based on the return value of the first() method?

TS Playground

javascript typescript types

Answer 1

Answer №1

To achieve the desired behavior, you cannot rely solely on a variable; instead, you can leverage the inference behavior of functions:

interface Res<R = any> {
    first?(): Promise<R>;
    second(arg: { response: R }): void;
}

function createRes<T>(o: Res<T>) {
    return o
}
const entity = createRes({
    first: () => Promise.resolve({ name: 'Bob' }),
    second: (arg) => {
        console.log(arg.response)
    }
})

Playground Link

Answer 2

To achieve the desired behavior, you cannot rely solely on a variable; instead, you can leverage the inference behavior of functions:

interface Res<R = any> {
    first?(): Promise<R>;
    second(arg: { response: R }): void;
}

function createRes<T>(o: Res<T>) {
    return o
}
const entity = createRes({
    first: () => Promise.resolve({ name: 'Bob' }),
    second: (arg) => {
        console.log(arg.response)
    }
})

Playground Link

Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

Answer №1

Similar questions

Refreshing Slickgrid: Updating grid data with data fetched from an AJAX source

Tips for avoiding recursive error function calls in Angular 5

Bidirectional data binding in angular 12 reactive forms

EJS is refusing to render the HTML page

Setting the Content-Type of a JavaScript file within a NodeJS application

A guide on displaying containers with jQuery and CSS

How can I access keys and values from an Observable within an Angular template?

What steps should I take to troubleshoot and resolve the connection issue that arises while trying to execute npm install

Unveiling the essence of Lodash's differenceBy functionality

Node.js: Extract the object's name and value that are sent from the frontend

I need help figuring out how to navigate between different pages in my Vue-cli app that has multiple pages configured

Convert JSON data into a Google chart with a dynamic number of columns and arrays

Guide to placing a button on the same line as text with the use of JavaScript

React Hooks: Issue with UseRef not detecting events from Material UI Select component

Encountering a "dependency resolution error" while deploying a React application with Parcel on Heroku

group items into ranges based on property of objects

Obtaining text from a select list using JQuery instead of retrieving the value

Convert the canvas to an image by right-clicking

Nativescript encountered an error due to an undefined variable called FIRAuth

When attempting to utilize VueJs v-bind:type on an input element, it appears to be ineffective when the type property name is