Differences between Typescript Generics and Unions

When I define a function type with parameters like value: string | number, I am able to define a function (value: string) => null of that type without TypeScript showing any warnings.

However, if I define a function type with a generic parameter like

<T extends string | number>(value: T)
, TypeScript will throw an error.

Can someone explain this behavior?

Code example:


type OnChangeUnion = (value: string | number) => void;

type OnChangeGeneric = <T extends string | number>(value: T) => void;

const handleChange = (value: string) => null;

const onChange: OnChangeGeneric = handleChange;
const onChangeA: OnChangeUnion = handleChange;

Playground Link

Answer №1

When looking at the Generic example, it appears that your notation is slightly incorrect:

type OnChangeGeneric<T extends string | number> = (value: T) => void;
const handleChange = (value: string) => null;
const onChange: OnChangeGeneric<string> = handleChange;

In the Union example, there will be a compiler error (as mentioned by @zerkms), because handleChange only accepts a string, which is not compatible with string | number.

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

Migrating image information from Angular version 14 to Asp.Net Core 6.0 Rest Api

When transferring product model data from Angular to a REST API using FormData, there is an images array included in the product data. Upon receiving this product in the REST API, the images data is accessed using Request.Form.Files. The images are then se ...

I have been attempting to incorporate icons from fluent ui northstar into the fluent ui dropdown component, but unfortunately, there is a lack of adequate documentation

I attempted to use renderItem to include a divider and Icon in a Fluent UI dropdown menu, but the icons are not visible. Even the default value does not display the icons, and the dropdown menu does not appear after clicking. import * as React from " ...

Is there a way to activate the final form when submitted?

I am facing an issue with React Final Form. Despite following the example in the official documentation, I am still struggling to understand why my form is not triggering the onSubmit function as in the example. I am also grappling with understanding the p ...

Encountering a problem: React is returning null when utilizing JavaScript import maps to bring in a project to an already existing project

I am in the process of developing Project A, which focuses on creating reusable components through Vite. The main objective is to export these components to other projects that already exist. In order to accomplish this task, I have employed JavaScript imp ...

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

Review this test code: import { isHtmlLinkDescriptor } from '@remix-run/react/links' import invariant from 'tiny-invariant' import { links } from '~/root' it('should return a rel=stylesheet', () => { const resp ...

Using a custom TypeScript wrapper for Next.js GetServerSideProps

I developed a wrapper for the SSR function GetServerSideProps to minimize redundancy. However, I am facing challenges in correctly typing it with TypeScript. Here is the wrapper: type WithSessionType = <T extends {}>( callback: GetServerSideProps&l ...

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

Even after numerous attempts, I am still grappling with TypeScript problems. Currently, I am at a loss on how to resolve this particular issue, despite all the research I have conducted. The code snippet below is what I am working with, but I am struggling ...

What is the best way to extract the ID from an event in TypeScript?

HTML Code: <ion-checkbox color="dark" checked="false" id="1on" (ionChange)="onTap($event)" ></ion-checkbox> TypeScript Code: onTap(e) { console.log(e); console.log(e.checked); } I am trying to retrieve the id of the checkbox. H ...

Optimal strategy for initializing class members

When declaring a class with a member like: import {Subject} from "rxjs"; export class MyClass { protected subject: Subject<string>; } what is the preferred practice in TypeScript for initializing the subject member? Is it better to do it in the ...

Cypress - Ensuring selective environment variables are committed to source control

I currently have two different .env files, one named development.json and the other called production.json. These files contain various environment variables structured like this: { "env": { "baseUrl": "test.com", ...

Is it feasible to create a set of standardized values for an array's properties?

My goal is to restrict the values for a property (or react props in this case) based on the values provided in another property. Firstly, I have my Option interface: interface Option { value: string; label: string; } Next, I define my SelectInputProp ...

Is there a more efficient solution for incorporating undefined and null into a type apart from developing a custom generic function?

Often in programming, we encounter methods where one or more parameters can be null or undefined (sometimes both with derived types). This can result in long method signatures like this: doThing( user: User | undefined | null, thing: Thing | undefined ...

What is the best way to test the SSM getParameter function using Jasmine?

Is there a way to effectively test this? const ssmParameterData = await ssm.getParameter(params, async (error, data) => { if (error) throw error; return data; }).promise(); I have attempted mocking the method by doing: spyOn(ssm, 'getParameter& ...

Adding strings in Typescript

I have the following code snippet: let whereClause = 'CurLocation =' + GS + ' and Datediff(DD,LastKYCVerified,GetDate()) >= 180 and CreditCard = ' + 'ACTIVE ' + &ap ...

Enhancing the selection of options in Angular 2 using object values

When I retrieve a list of object values from an API, each object contains a property to identify the selected item. I am successfully binding the items list to the view. Here is the JSON data: https://i.sstatic.net/itmfh.png Below is my code snippet: & ...

I'm having trouble figuring out how to access response headers with HttpClient in Angular 5. Can anyone

I recently developed an authentication service in Angular 5, where I utilize the HttpClient class to make a POST request to my backend server. The backend server then responds with a JWT bearer token. Here is a snippet of how my request looks: return thi ...

Utilize knex.js and TypeScript to create queries with specific conditions

I am trying to create a dynamic query that will include a where clause based on whether the variables name and/or city are passed. While I couldn't find a specific method for this in the documentation, I attempted to add the where clauses directly to ...

Typescript's Integrated Compatibility of Types

One important concept I need to convey is that if one of these fields exists, then the other must also exist. When these two fields are peers within the same scope, it can be challenging to clearly communicate this connection. Consider the example of defi ...

Angular: Granting an external module access to a provider

One of the modules I imported provides a service with an optional dependency. Although it being optional didn't affect my application, as it just prevented any errors from occurring when not present. Here's an example: import { FooModule } from ...

What Causes a Mongoose Query to Result in an Empty Array?

Hello, I have reviewed similar questions regarding the issue I am facing with developing an API. Despite trying different solutions, none seem to resolve my problem. When handling request and response payloads in my API, everything seems to be working fin ...