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)

typescriptobjectkeyof

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');

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

Encountering an unexpected token while trying to use createUserWithEmailAndPassword in firebase/auth with Next.js and TypeScript left Jest puzzled

I have been working on integrating Firebase authentication into my Next.js project (using TypeScript), but it appears that there are configuration issues with Firebase causing my Jest tests to fail. Here are the key configuration files: jest.config.js : ...

typescriptfirebasenext.jsjestjsfirebase-authentication

`Is there a way to assign multiple parameters to HttpParams within Angular 5?`

I'm attempting to send multiple parameters to HttpParams in Angular 5 using the approach below: paramsObject: any params = new HttpParams(); for (let key in paramsObject) { params.set(key, paramsObj ...

angulartypescriptangular5

Tips for asynchronously updating a model in TypeScript

I have been working on a function to hide the element for connecting to Facebook upon successful connection. I have implemented two functions, success and error, which trigger after Firebase successfully logs in the user. While I can confirm that these fun ...

javascripttypescriptnativescript

Mismatched non-intersecting categories with TypeScript

I have an object that I need to conditionally render some JSX based on certain properties. I want to restrict access to specific parts of the object until certain conditions are met. Here is my scenario: const { alpha, bravo } = myObject; if (alpha.loadin ...

typescript

Using the spread operator in Typescript with an object that contains methods

Within my Angular project, I am faced with an object that includes a type and status field where the status can change depending on the type. While some might argue that this is not the best design practice, it is how things are currently structured in my ...

angulartypescripttypescript2.0

Executing the routing component prior to any other tasks

Having an issue where the ProductsService is fetching data from the server and storing it in an Array. The ProductsComponent serves as the parent component, while the ProductsListComponent and ProductListItemsComponent are its children components. The flow ...

angulartypescript

In TypeScript, the 'onChange' is declared multiple times, therefore this particular usage will be scrutinized carefully

Within my React project, I am utilizing material-ui, react-hook-form, and Typescript. However, I encountered an error in VSCode when attempting to add the onChange function to a TextField component: 'onChange' is specified more than once, resul ...

reactjstypescriptmaterial-ui

Exploring data retrieval from nested arrays of objects in TypeScript/Angular

I have an API that returns an object array like the example below. How can I access the nested array of objects within the JSON data to find the role with roleid = 2 when EmpId is 102 using TypeScript? 0- { EmpId: 101, EmpName:'abc' Role : ...

jsonangulartypescript

Having trouble with Ionic 4 navigation not triggering after a single click, requiring multiple clicks to navigate

I have a long list of items, around 40 in total, that load a page describing each item with photos, URLs, and other content. However, I find that I need to click two to three times before reaching this page. I suspect that the excessive use of HTML compone ...

androidhtmltypescriptionic-framework

Using the HERE Maps JavaScript API to implement custom styles from a JSON file

TLDR: How can I change the map style using a .json file from HERE maps editor? After creating a "custom" style in the new HERE map style editor and exporting it as a single .json file, I encountered difficulties applying this styling due to lack of clear ...

typescriptvuejs2here-apiharp

Enhancing nested structures in reducers

Currently, I am utilizing react, typescript, and redux to develop a basic application that helps me manage my ingredients. However, I am facing difficulties with my code implementation. Below is an excerpt of my code: In the file types.ts, I have declared ...

reactjstypescriptreduxreact-redux

Leveraging Angular Observables for seamless data sharing across components

As I embark on developing my very first Angular app, I have encountered a challenge with filtering a list of book objects based on their gender attribute. The issue lies in sharing data between components – specifically the filteredData variable and the ...

angulartypescriptfirebasefirebase-realtime-databaseobservable

Error: Unable to locate module with associated type definitions when utilizing Typescript in Next.js

Currently, I am working on a next.js project that I'm attempting to integrate typescript into. The structure of my folders is organized as follows: api aggregation.ts interfaces index.ts components Component1 index.js index.module.css ...

node.jsreactjstypescriptnext.jsbabeljs

How can you make an IonPopover dynamically appear from a button with the perfect positioning?

I want to display a popover below a button when the button is clicked, similar to the example on the Ion docs page. However, I am having trouble implementing this in React as the code provided is only for Angular. Here is my current code: ... <IonButt ...

reactjstypescriptionic-frameworkpopoverionic-react

What is the best method for retrieving the complete path of a FormControl in Angular versions 4 and above

Is there a way to obtain the complete path of a FormControl in Angular 4+? Below is my reactive form structure: { name: '', address: { city: '', country: '' } } I urgently require the full path o ...

angulartypescriptangular-reactive-formsangular-forms

Error: the attempt to execute the mongoose connection function has failed due to it not being recognized as a valid function

Hey there, I'm encountering the error TypeError: mongoose__WEBPACK_IMPORTED_MODULE_15___default.a.connect is not a function import mongoose from "mongoose"; const dbURI = 'myurlstuffhere'; mongoose.connect(dbURI , {useNewUrlParser: ...

typescriptmongoose

Solving the issue where the argument type is not assignable to the parameter type

I am attempting to filter an array of objects in React using TypeScript and encountered this error. Below is my interface, state, and function: TS2345: Argument of type '(prev: IBudget, current: IBudget) => IBudget | undefined' is not assigna ...

reactjstypescriptfiltertypesreduce

Is it possible to denote two "any" as the same thing in a TypeScript function signature?

Here is a function to extract items from an array based on a checker function: function extractItemsFromArray(array: any[], isItemToBeRemoved: (item: any) => boolean) { let removedItems = []; let i = array.length; while(i--) if(isItemToBeRemo ...

typescript

What is the process for setting a Type to a prop in React?

I have a main component: // DashboardComponent.tsx const DashboardComponent = () => { const {loading, error, data} = useQuery(resolvers.ReturnAllMovies); if (loading) return <p>loading</p>; if (error) return <p>Error! ${error.m ...

reactjstypescript

Tips for resolving the undefined error in TypeScript and React

Hey, I have this code snippet below which includes a call to the isSomeFunction method that returns true or false. However, there are times when the argument can be undefined. I only want to execute this function if selectedItems is not undefined. How can ...

typescript