Is there a way for me to use TypeScript to infer the type of the value returned by Map.get()?

type FuncType<O extends Object> = (option: O) => boolean

export const funcMap: Map<string, Function> = new Map()

const func1: FuncType<Object> = () => true
const func2: FuncType<{prop: number}> = ({ prop }) => prop !== 0
funcMap.set('func1', func1)
funcMap.set('func2', func2)

In a separate file..

const _func2 = funcMap.get('func2')
if (_func2 !== undefined) _func2() // here I am expecting the type FuncType<{prop: number}>

The type of _func2() is currently being recognized as Function.
I see why this is happening.
How can I adjust my TypeScript code to infer and return the expected type from Map.get()?

typescript

Answer №1

To enhance the existing Map interface, you can customize its .get() method to integrate a type dictionary.

type FunctionType<O extends Object> = (option: O) => boolean

const function1: FunctionType<Object> = () => true
const function2: FunctionType<{property: number}> = ({ property }) => property !== 0

export const functionMap: CustomMap<keyof FunctionStore, Function> = new Map()

functionMap.set('function1', function1)
functionMap.set('function2', function2)

interface FunctionStore {
  function1: typeof function1
  function2: typeof function2
}

interface CustomMap<K, V> extends Map<K, V> {
  get<P extends keyof FunctionStore>(key: P): FunctionStore[P]
  get(key: K): V
}


// ----- another file ----
import { functionMap } from './elsewhere'

const _function1 = functionMap.get('function1')
const _function2 = functionMap.get('function2')

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

Is there a way to restrict the type of the value returned by URLSearchParams.get() to a specific union type?

When handling a search parameter in the URL, such as ?mode=view, it is important to validate the value of mode to ensure it is either 'edit' or 'view'. To achieve this, a custom type called ModeTuple is created and converted to a union ...

typescripttypes

Can TSLint and ESLint give a warning when a function is accessed as a property?

There have been instances where I've made this specific mistake, and I'm curious if there are any ESLint or TSLint rules in place that could detect it. if (this.isBrowser && this.imageURL) {.....} private isBrowser(): boolean{ retur ...

javascripttypescripteslinttslint

The date in a nodejs application appears to be shifted by one day

Despite similar questions being asked before here, the solutions provided did not resolve my issue. Here is the scenario I am dealing with: https://i.sstatic.net/H9rcO.png Upon clicking save, I collect data from certain fields to generate a date using th ...

node.jsmongodbangulardatetypescript

When using TypeScript, my sorting function returns a value of 0 for all time values

I have been trying to sort this JSON data by date using the provided code, but it does not seem to work as expected. Below is a snippet of my JSON: { "StatusCode":0, "StatusMessage":"OK", "StatusDescription":[ { "id":"1", ...

angularsortingtypescript

"Encountering an issue with mounting components in React Unit Testing with Jest and Typescript

Having developed a simple app with components, here is the code: import GraphicCanvas from './Graphing/GraphCanvas'; import { drawCircle } from './Graphing/DrawCircle'; function App() { return ( <div className="App"&g ...

reactjstypescriptreact-hooksjestjsenzyme

Need help in NestJS with returning a buffer to a streamable file? I encountered an error stating that a string is not assignable to a buffer parameter. Can anyone provide guidance on resolving this issue?

The issue description: I am having trouble returning a StreamableFile from a buffer. I have attempted to use buffer.from, but it does not seem to work, resulting in the error message below. Concern in French language: Aucune surcharge ne correspond à cet ...

node.jstypescriptnestjs

"Activate the mat-checkbox based on the outcome of a certain process

I'm working with a mat-checkbox that triggers a mat-dialog when clicked. If the user clicks "confirm" in the dialog, I want the checkbox to be checked. If they click "cancel", I want it to remain unchecked. How can I achieve this? Below is the method ...

htmlangulartypescriptcheckboxangular-material

Tips for sending data returned asynchronously from an Observable in Angular from a Child component to its Parent

I am facing a challenge passing Async data from child to parent component. When I try to access console.log(this.values) within the ngAfterViewInit() method in the parent component's HTML page load, it returns an empty value. However, upon clicking th ...

angulartypescriptangular-componentsviewchildasyncdata

Determine the data type of an index within an array declaration

Imagine we have the following array literal: const list = ['foo', 'bar', 'baz'] as const; We are attempting to create a type that represents potential indices of this array. This is what we tried: const list = ['foo&ap ...

typescript

Developing OnIdle with rxjs

As I explore rxJS, I've come across this code snippet that monitors browser activity such as mouse movements, clicks, and keyboard usage. It's like the opposite of onIdle. import { fromEvent, throttle, debounce, interval, merge } from 'rxjs& ...

reactjstypescriptreact-hooksrxjs

Issue arising from passing an object through a component in a Next.js application during build time when the object is retrieved from a database

Can anyone provide assistance with solving this issue? I have an object called "diary" coming from a database, which is passed to a component where a useState hook is expecting that object. During build time, the following error is occurring. An error is ...

typescriptnext.jsreact-typescriptnextjs14

What is the proper way to declare a Type for a JSX attribute in Google AMP that utilizes square brackets?

When utilizing AMP's binding feature, you must apply specific attributes that encapsulate an element's property with square brackets and connect it to an expression. An example from AMP is shown below: <p [text]="'Hello ' + foo"> ...

javascriptreactjstypescriptamp-html

Toggle visibility of an Angular 4 component based on the current route

Hello there, I'm facing an issue and not sure if it's possible to resolve. Essentially, I am looking to display a component only when the route matches a certain condition, and hide another component when the route matches a different condition. ...

javascriptangulartypescript

Encountering the error "TS(2604): JSX element type 'App' does not have any construct or call signatures" while trying to export an array of JSX Elements

I have a function that returns an array of JSX Elements. When I pass this to ReactDOM.render, I encounter the error mentioned above. wrappers.tsx const FooterWithStore:React.FC = () => ( <Provider store={store}> <FooterLangWrapper ...

reactjstypescriptreact-dom

Sharing information between components in Angular through service communication

In my Angular 4 project, there is a functionality where upon clicking on one of the 'groups', its tile should be added to a list of 'favourites' which is represented as an array. To implement this feature, I utilized a BehaviorSubject. ...

angulartypescript

Using renderProps in combination with TypeScript

I've encountered an issue while trying to convert my React project to TypeScript, specifically with the login component that uses react-google-login. The error I'm facing is related to renderProps: Overload 1 of 2, '(props: { component: El ...

reactjstypescript

What could be causing the transparency of my buttons when viewed on my device?

Recently, I customized the appearance of buttons in my App by adding colors. Surprisingly, everything looks perfect when I test it on a local server on my PC. However, once I deploy the App to my Android device, all the buttons become transparent. In my v ...

androidcsstypescriptionic-frameworkionic4

Connect your Angular2 app to the global node modules folder using this link

Is there a way to set up a centralized Node modules folder on the C disk instead of having it locally within the app directory? This would be more convenient as Angular2 CLI tends to install over 125mb of Node modules in the local folder. In our TypeScrip ...

node.jstypescriptnpmangular

Tips for compacting JSON in Typescript

I have encountered a challenge in my coding where we are dealing with quite large data objects. I am exploring the possibility of compressing these data objects to reduce payload size. For instance, if our input json size is 2 MB, can it be compressed to a ...

jsontypescriptcompressionpayload

Having trouble persisting data with indexedDB

Hi there, I've encountered an issue with indexedDB. Whenever I attempt to store an array of links, the process fails without any visible errors or exceptions. I have two code snippets. The first one works perfectly: export const IndexedDB = { initDB ...

javascriptreactjstypescriptindexeddb