type SingleOrArray<T> = T | [T]
function f<T extends 'a' | 'b'>(a: SingleOrArray<T>, b: SingleOrArray<T>) {
return a && b
}
f('a', ['b'])
Then an error occurred:
Argument of type '"a"' is not assignable to parameter of type 'SingleOrArray<"b">'function f<"b">(a: SingleOrArray<"b">, b: SingleOrArray<"b">): SingleOrArray<"b">"
I'm having difficulty understanding why this is happening. Can anyone provide assistance please?
If the current approach does not align with your objectives, then using generics in this function example may not be beneficial. Instead, consider utilizing the type directly and potentially creating an alias for it:
type AOrB = 'a' | 'b';
function f(a: SingleOrArray<AOrB>, b: SingleOrArray<AOrB>) {
return a && b
}
To make the type independent in both arguments, you could introduce separate type parameters for each argument:
function f<
T1 extends 'a' | 'b',
T2 extends 'a' | 'b'
>(a: SingleOrArray<T1>, b: SingleOrArray<T2>) {
return a && b
}
After delving deep into the source codes for an entire day, I believe I have finally uncovered the solution:
Essentially, <T> was deduced as 'a' and 'b' from T and [T] respectively, which were identified as candidate types. These two candidate types possess varying priorities: T within the union type definition has a unique priority value of 1 (Refer to https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts, line 4398, the NakedTypeVariable enum value), while [T] has a standard priority value of 0, indicating higher priority in ordering.
Subsequently, the higher priority value of 0 will supersede 1 immediately, prior to scrutinizing the type specifics. This is why the type 'a' was replaced. In instances where they share the same priority value, they would be merged (as shown below).
The most straightforward solution is to eliminate <T extends 'a' | 'b'>. Without any form of assertion, T within [T] will be inferred as a broader type string following the decomposition of a virtual expression ['b'].
I also discovered the compiler's handling of scenarios where multiple candidate types are present: If candidate types share a fundamental (e.g., string, number) covariant type, they are combined using the union symbol |. Alternatively, the compiler selects the leftmost type for which no subsequent types are super types.
Here is the code from my app.component.html : <h1>Password Generator</h1> <div> <label>Length</label> </div> <input (input)="onChangeLength($event.target.value)"/> <div> <div> <input ...
I'm facing an issue with importing Howler into my Angular 2 app as it doesn't have a typings file. Despite my efforts in searching for a solution, I haven't been able to find anything helpful. Can someone guide me on how to import "howler" i ...
My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...
Looking to leverage the relatively new "exports" functionality in Node.js/package.json for the following setup: "exports": { ".": "./dist/index.js", "./foo": "./dist/path/to/foo.js" } so that ...
Is it feasible to create a TypeScript wrapper for localStorage with a schema that outlines all the possible values stored in localStorage? Specifically, I am struggling to define the return type so that it corresponds to the appropriate type specified in t ...
To start, I need to automatically redirect to today's date as the default. Below is the routing configuration I currently have set up: import { CALENDAR_ROUTE } from './_methods/utils'; export const appRoutes: Routes = [ { path: Cal ...
Currently in the process of transitioning a Gatsby website to Next.js (v13.4) and utilizing the new App Router. However, I'm facing some challenges when it comes to migrating the blog section over because there isn't much accurate guidance availa ...
I am trying to incorporate flowjs or ng-flow into my Angular 2 application. After installing the flowjs typings using npm install --save-dev @types/flowjs from However, upon importing it into my component with import { Flow } from 'flowjs';, ...
Currently, I am working on a basic app that retrieves posts from the server and displays them as cards on the screen. At this early stage, one of my main challenges is figuring out how to dynamically add ion-card elements with changing content and headers ...
After exploring various examples of using TaskEither for tasks like making HTTP requests or reading files, I am now attempting to simulate the process of retrieving an item from a database by its ID. The possible outcomes of this operation could be: The i ...
After attempting to create a file and write in it, I'm encountering an issue where the file appears to be created but is not visible when navigating to the folder. Can someone please point out what might be going wrong? Below is my code snippet: th ...
Enhancement After yoduh's feedback, I made adjustments to the code below. However, vue3datepicker is still undefined. Code has been updated according to yodubs suggestion. I consulted the official vue3datepicker documentation to customize my own Act ...
I'm currently working on an Angular 5 Project where speed and responsiveness are crucial when retrieving a large object from the server. To optimize performance, I have broken down the object (resembling a Word Document) into main components (similar ...
import {Component, Inject} from '@angular/core'; import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview Example with Angular Material */ @Component({ selector: 'dialog-overview-ex ...
I am currently working with a list that utilizes an *ngFor loop in the template: <li *ngFor="let product of products | filterProducts: selectedFilter; index as productId"> <a [routerLink]="['/product', productId]"> {{produc ...
I am currently using Next Auth with credentials to handle sign-ins. Below is the React sign-in function, which can be found at this link. signIn('credentials', { redirect: false, email: email, password: password, ...
Imagine having an element that wraps around an input and inherits all of its properties, along with some extras. In React, you would define this as: interface ExtendedInputProps extends React.ComponentPropsWithoutRef<'input'> { some: T ...
My code is similar to the following scenario, where I am attempting to replace a property based on a decorator export function DecorateMe() { return function(component: any, propertyKey: string) { Object.defineProperty(component, propertyKey, ...
I have a large list of photo thumbnails, and I need to ensure that one of the thumbnails scrolls into view when the list is loaded. The photos are generated using the map function, and the container div of one of the thumbnails will be assigned a ref. I ...
After researching countless similar inquiries on this topic, I have come to the realization that most of the answers available are outdated or rely on discontinued NPM packages. Additionally, many solutions are based on packages with unresolved bug reports ...