How can I retrieve a certain type of object property in TypeScript?

Question

How can I retrieve a certain type of object property in TypeScript?

Imagine having a collection of flags stored in an object like the example below:

type Flags = {
  flag1: string,
  flag2: string,
  flag3: boolean,
  flag4: number
}

// const myFlags: Flags = {
//   flag1: 'value 1',
//   flag2: 'value 1',
//   flag3: true,
//   flag4: 12
// }

My goal is to create a function getFlag with this structure:

function getFlag(flag: keyof Flags): any { 
   // return myFlags[flag]
}

Instead of simply returning any, how can I determine and return the specific data type corresponding to the flag being passed into the getFlag function?

(for simplicity, let's assume the flag types are limited to boolean, string, and number, but the goal is still to extract the exact property type instead of boolean | string | number)

typescript object keyof

Answer 1

Answer №1

To enhance the functionality, modify the function to be generic so that it can accept any type of string for looking up the corresponding value on the object.

function fetchValue<T extends keyof Values>(key: T) { 
   return myValues[key]
}
const output = fetchValue('key1');

For further precision, consider using as const to return the exact type.

 const myValues = {
   key1: 'data 1',
   key2: 'data 2',
   key3: false,
   key4: 56
 } as const;

function fetchValue<T extends keyof typeof myValues>(key: T) { 
   return myValues[key]
}
const output = fetchValue('key1');

Answer 2

To enhance the functionality, modify the function to be generic so that it can accept any type of string for looking up the corresponding value on the object.

function fetchValue<T extends keyof Values>(key: T) { 
   return myValues[key]
}
const output = fetchValue('key1');

For further precision, consider using as const to return the exact type.

 const myValues = {
   key1: 'data 1',
   key2: 'data 2',
   key3: false,
   key4: 56
 } as const;

function fetchValue<T extends keyof typeof myValues>(key: T) { 
   return myValues[key]
}
const output = fetchValue('key1');

How can I retrieve a certain type of object property in TypeScript?

Answer №1

Similar questions

Encountering a problem with react-select in typescript when using react-use-form-state

Modifying iframe src using click event from a separate component in Angular 10

Angular 11 Working with template-driven model within a directive

What is preventing me from using property null checking to narrow down types?

Exiting a void method in JavaScript/Typescript using the return or break statement

Unexpected behavior with Node js event listener

Update the function's argument type signature if the current argument is a function with properties

It seems like the recent upgrade to yarn 2 has caused issues with typescript types, whereas the installation of the same project with yarn 1 was

Utilizing Enum Lowercase as Index Key Type in TypeScript

What is the best way to pass an array as a parameter in Angular?

Conceal the HTML element within a subscription

Adding TypeScript definition file to an npm package: A step-by-step guide

Experiencing a problem with updating records in angular?

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Using ReactJS with Material UI and applying styles with withStyles including themes in TypeScript

The logic behind combining elements from two arrays in JavaScript/TypeScript

Delay the execution until all promises inside the for loop are resolved in Angular 7 using Typescript

Differences between useFormState and useForm in Next.js version 14

Error: Invalid connection string for ELF Lambda detected

Listening for Angular 2 router events