Using Typescript to define the return value of an object's key value pair

Question

Using Typescript to define the return value of an object's key value pair

Having just created the method getSpecificPlacementOption, I am faced with defining its return value in Typescript. As a newcomer to this language, I find myself unsure of how to go about it. Within my object called placementOptions, I aim to return a specific value from one of its keys:

export interface PlacementOptions {
  badgeOptions?: BadgeOptions;
  cardLayoutOptions?: CardLayoutOptions;
}

const getSpecificPlacementOption = (key: placementOptionsKey) => placementOptions[key];

What would be the correct way for me to define the return statement within the method placementOptions[key]?

javascript typescript

Answer 1

Answer №1

// The function below can have its return type inferred
function fetchSpecificOptionValue<T extends keyof SpecificOptions>(optionKey: T): SpecificOptions[T] {
  return specificOptions[optionKey];
}

const fetchSpecificOptionValue2: <T extends keyof SpecificOptions>(optionKey: T) => SpecificOptions[T]
  = optionKey => specificOptions[optionKey];

Although simpler, TypeScript may not determine which property is being returned specifically:

const fetchSpecificOptionValue =
    (optionKey: keyof SpecificOptions) => specificOptions[optionKey];

Answer 2

// The function below can have its return type inferred
function fetchSpecificOptionValue<T extends keyof SpecificOptions>(optionKey: T): SpecificOptions[T] {
  return specificOptions[optionKey];
}

const fetchSpecificOptionValue2: <T extends keyof SpecificOptions>(optionKey: T) => SpecificOptions[T]
  = optionKey => specificOptions[optionKey];

Although simpler, TypeScript may not determine which property is being returned specifically:

const fetchSpecificOptionValue =
    (optionKey: keyof SpecificOptions) => specificOptions[optionKey];

Using Typescript to define the return value of an object's key value pair

Answer №1

Similar questions

Attempting to generate a nested array structure in order to produce a JSON object for output

"Troubleshooting the inconsistency of GraphQL resolver context functionality between Playground and the client in the official NextJS starter

Explanation for the strange floating math in JavaScript - Understanding the IEEE 754 standard for laymen

Prevent financial disagreement by utilizing jQuery carefully

Steps for toggling between enabling and disabling the 2 instances of bvalidator

Retrieve the name of the file and then substitute the file name with the selected value from the radio button

I'm encountering an error where navigation.navigate is not being recognized as a function. Any ideas on

Server nearby designated to handle requests to the api

Using jQuery does not automatically pre-check multiple checkboxes. This issue may arise when using PHP and AJAX together

Dealing with Typescript in Node.js: Handling the error 'Property not found on type Global & typeof globalThis'

Creating an interactive animation of bouncing balls within an HTML5 canvas using JavaScript

How to use RegExp to locate the final return statement within a JavaScript code string

Server encountered an unexpected T_STRING error that was not present on the localhost

Tips for sending a form and showing results without the need to refresh the page

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

New data field is created with AngularFire2 update instead of updating existing field

Is there a Clash between JQuery and Bootstrap 4 Popover?

An error arises in node.js when attempting to render headers after they have already been sent to the client

Error encountered while attempting to execute Typescript with tsc file.ts in the WebGL2RenderingContext

Unraveling complex JSON structures