Can the output type of a function be dynamically determined by using the function parameter name as the property in an interface?

Question

Can the output type of a function be dynamically determined by using the function parameter name as the property in an interface?

I am attempting to dynamically assign the output of a function based on the name of the input parameter within an existing interface:

interface MyInterface {
  typeA: string;
  typeB: boolean;
  typeC: string;
  typeD: number;
  ...
}

const myFunction: (parameterName: string) => MyInterface[parameterName] =
  (parameterName) =>
    {
      ...
      return valueXYZ 
    }

An error is appearing that states:

'parameterName' refers to a value, but is being used as a type here.

Currently, the variables defined in this manner must each implement their specific type individually, preventing me from typing my function in a more general way as envisioned above.

const valueA: MyInterface['typeA'] = myFunction('typeA');
const valueB: MyInterface['typeB'] = myFunction('typeB');
const valueC: MyInterface['typeC'] = myFunction('typeC');
const valueD: MyInterface['typeD'] = myFunction('typeD');
...

Is there a method to instruct Typescript to utilize the parameterName as the propertyName defined in the interface?

typescript

Answer 1

Answer №1

To ensure that your function's output value is determined by a parameter, you can utilize the following approach:

interface MyCustomInterface {
  category: string;
  isActive: boolean;
  price: number;
  quantity: number;
}

const customFunction = <T extends keyof MyCustomInterface>(paramName: T): MyCustomInterface[T] => {
  ...implementation
}

const result1 = customFunction('isActive'); // typeof result1 is boolean
const result2 = customFunction('quantity'); // typeof result2 is number
const result3 = customFunction('unknown'); // error, 'unknown' is not in MyCustomInterface

Answer 2

To ensure that your function's output value is determined by a parameter, you can utilize the following approach:

interface MyCustomInterface {
  category: string;
  isActive: boolean;
  price: number;
  quantity: number;
}

const customFunction = <T extends keyof MyCustomInterface>(paramName: T): MyCustomInterface[T] => {
  ...implementation
}

const result1 = customFunction('isActive'); // typeof result1 is boolean
const result2 = customFunction('quantity'); // typeof result2 is number
const result3 = customFunction('unknown'); // error, 'unknown' is not in MyCustomInterface

Answer 3

Answer №2

interface Widget {
   foo: Foo;
   bar: Bar;
}

function newWidget<T extends keyof Widget>(parameter: T): Widget[T] {
  ...
}

const foo = newWidget('foo');
// foo: Foo
const bar = newWidget('bar');
// bar: Bar

Answer 4

interface Widget {
   foo: Foo;
   bar: Bar;
}

function newWidget<T extends keyof Widget>(parameter: T): Widget[T] {
  ...
}

const foo = newWidget('foo');
// foo: Foo
const bar = newWidget('bar');
// bar: Bar

Can the output type of a function be dynamically determined by using the function parameter name as the property in an interface?

Answer №1

Answer №2

Similar questions

Exploring the power of Node JS with Promise.all and forEach within a nested array

How to access a variable from one page to another in Ionic version 3

Guide to implementing a dropdown menu for selecting countries in Angular

What is the appropriate event type to pass to the onKeyPressed function in a React application utilizing MaterialUI and written with Typescript?

Guide to importing OBJ file into three.js using TypeScript

The raw password value must be provided and cannot be left blank

What steps are needed to generate a production version of a TypeScript monorepo application that can be deployed to an Azure Function App?

typescript leaflet loading tutorial

The attribute 'disabled' is originally defined as a characteristic within the class 'CanColor & CanDisableRipple & HasTabIndex & MatChipBase'. However, it is replaced in the current context of 'MatChip' as an attribute

Can you explain how the "reduce" function can be implemented using an interface in TypeScript?

Angular model-based forms encounter an issue with converting null to an object during asynchronous validation

Using node.js to set the billing address while confirming a Stripe Payment intent

What is the best way to showcase the information retrieved from my API?

Failed to update the innerHTML attribute for the anchor tag

When a Vue component collapses on itself, it prevents the next component from rendering

Using Typescript for-loop to extract information from a JSON array

Employing async/await for efficient data retrieval

When executing the release command in Ionic 3, the Angular AoT build encountered a failure

Do const generics similar to Rust exist in TypeScript?

Utilizing Typescript for Efficient Autocomplete in React with Google's API