Typing input props based on conditions

I'm struggling to create parameters that rely on the type of field being transmitted. It's puzzling why the handler includes any type of arguments.

type TInputType =  'text' | 'number' | 'date';

type THandler<V> = (e: Event, data: { value: V }) => void


type TProps<T extends TInputType = TInputType> = {
  type: T
} & (
  T extends 'number' ? {
    value: number
    handler: THandler<number>
  } : {
    value: number
    handler: THandler<string>
  }
)


function input(props: TProps) {
  console.log(props);
}

const val = 1234;

input({ type: 'number', value: val, handler: (e, { value }) => {
----------------------------------------------^----^--------------
Parameter 'e' implicitly has an 'any' type.(7006)
Binding element 'value' implicitly has an 'any' type.(7031)
------------------------------------------------------------------
  console.log(e, value)
} });

Looking for guidance. Any help would be appreciated!

Answer №1

To make TypeScript infer the type information from the argument in the input function, simply add a generic type parameter. Currently, the default TInputType is always used:

Check out TS Playground for more info.

function input<T extends TInputType>(props: TProps<T>) {
  //          ^^^^^^^^^^^^^^^^^^^^^^              ^^^
  console.log(props);
}

const val = 1234;

input({
  type: "number",
  value: val,
  handler: (e, { value }) => {
               //^? (parameter) value: number
    console.log(e, value);
  },
});

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

Exploring the fusion of different interfaces and props in React using typescript

I have designed an interface as shown below, representing the "base button". export interface ButtonProps { backgroundColor?: Colors, children?: React.ReactNode | JSX.Element, style?: CSSProperties, disabled?: boolean, onClick?: () => ...

Async and Await with Typescript

After searching extensively, I couldn't find a similar issue. I am working with Ionic 4 in Angular 7 along with Typescript 3.16. I have multiple 'TimeSpan' values that I need to retrieve using a function from the HTML like so: <ion-input ...

How can I retrieve the date from the following week with Ionic?

I am looking to retrieve the date of today plus 7 days. Currently, I am retrieving today's date using the following code: public dateToday: string = new Date().toLocaleDateString('de-DE'); After searching on Google, I came across the soluti ...

Exploring the use of file loaders with TypeScript

Currently, I have configured a file loader for .png files using esbuild. Additionally, I have the following in my index.d.ts: declare module "*.png" { const value: string; export default value; } One issue I am facing is that my code editor ...

Challenges encountered when testing middleware in a TypeScript Node.js Express project

I have been exploring the repository at https://github.com/goldbergyoni/nodebestpractices to enhance my understanding of nodejs best practices. Below is a middleware I developed: import { NextFunction, Request, Response } from "express"; import ...

Guide to managing MUI's theme typography font weight choices with TypeScript

I am interested in learning how to incorporate a new font weight into my theme, for example, fontWeightSemiBold, and disable the existing fontWeightLight and fontWeightMedium. I believe this can be achieved through module augmentation. For reference, there ...

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

I'm encountering an error when trying to add a keydown event and convert the parameter type from Event to KeyboardEvent as shown below. fromEvent(document, "keydown") .pipe<KeyboardEvent, KeyboardEvent>( filter((event) => even ...

Toggle Button in Angular upon Form Changes

I am currently working on a bug that involves preventing users from saving data if they have not entered any information in the form. The form structure is as follows: private buildAddressPopupForm() { this.form = this.fb.group({ roles: [''], ...

NestJs Function yielding inconsistent results based on its calling location

There is a puzzling issue that I am unable to solve. I have stored priceHistories in memory within an array. Strangely, when I invoke a get method, the returned value varies depending on where the method is called from. This is the original property and m ...

Different ways to maintain the original syntax highlighting colors in JavaScript console

Upon closer inspection near the green arrows, you can see that the default console.log function colorizes values based on their type, distinguishing between string and number. https://i.sstatic.net/MtO8l.png In contrast, highlighted near the red arrows i ...

Navigating the use of a getter property key within a generic method signature

What I want to do is create a class with descendants that have a method signature that can adapt based on a compile-time fixed property, which can also be overridden. Here's an example: class Parent { public get config() { return { foo: & ...

Mastering Generic Types in Functions in Typescript

My current structure looks like this: export interface Complex { getId<T>(entity: T): string } const test: Complex = { getId<Number>(entity){return "1"} // encountering an error 'entity is implicitly any' } I am wondering w ...

Determining the type of <this> in an Object extension method using TypeScript

I am attempting to incorporate a functionality similar to the let scope function found in Kotlin into TypeScript. My current strategy involves using declaration merging with the Object interface. While this approach generally works, I find myself missing ...

Effortless transfer of a module from one TypeScript file to another

I'm facing an issue with importing classes from one .ts file to another .ts file. Here is the structure of my project: https://i.sstatic.net/gZM57.png I'm attempting to import print.ts into testing.ts This is how my tsconfig.json appears: ht ...

The 'Alias[]' type does not share any properties with the 'Alias' type

I encountered an issue: The error message 'Type 'Alias[]' has no properties in common with type 'Alias'' appeared. Here is my Alias setup: alias: Alias = { id: 0, domain_id: 0, source: '', dest ...

Unexpectedly, the task of "AssignTargetPath" did not complete successfully

While working on my Node project using Node Tools for Visual Studio (version 1.1), I encountered this error unexpectedly. I was using Visual Studio Community Edition 2015 and had the latest version of Typescript (v1.7.6) installed. Error: C:\Program ...

The resolution of Angular 8 resolver remains unresolved

I tried using console.log in both the constructor and ngOnInit() of Resolver but for some reason, they are not being logged. resolve:{serverResolver:ServerResolverDynamicDataService}}, console.log("ServerResolverDynamicDataService constructor"); console ...

Error in Angular 2 component when loading background images using relative URLs from an external CSS skin

In my angular2 component, I am utilizing a third-party JavaScript library. The skin CSS of the component attempts to load images using relative URL paths. Since I am following a component-based architecture, I prefer to have all component dependencies enca ...

core.js encountered an error at line 6237: Unable to assign value to property 'area' as it is undefined

HTML: I have created a form but encounter an error when clicking the submit button. Can someone please assist me in identifying the issue? <h3 class="page-header">Operator Form</h3> <div class="outer-container"> <form class="form-s ...

Is it possible to invoke Cucumber stepDefinitions from a separate project at the same directory level?

Currently, I have a project called integration_test that includes all test projects utilizing cucumberjs, typescript, and nodejs. Project1 contains the login implementation, and I would like to use this implementation in Scenarios from Project2 and Projec ...