When passing a generic multidimensional array T[][] (or rest params of T[]), TypeScript appears to expect the subsequent arrays to be a superset of the types in the first array.
function abc<T>(values: T[][]): T[] {
return values[0];
}
abc([[1], ['string'], [2], [3]]) // Error: Type 'string' is not assignable to type 'number'.
What is the reason for this behavior? Is there a way to make it infer the type as (number | string)[][]?
Have you ever thought about dropping a subtle hint that you want to turn it into a union type?
abc<string | number>([[1], ['string'], [2], [3]])
In this scenario, the error occurs because TypeScript assumes that you prefer T to be a singular type, rather than a union type.
Picture this: what if TypeScript always accepted whatever types you input in the array and just expanded the type to accommodate them? You would lose the benefits of type checking and might end up with a string | number | boolean | etc union type, which basically equates to any and is probably not what you had in mind.
After much experimentation, I finally cracked the code on how to get this to function properly.
By defining the multidimensional array as a generic type, everything falls into place just as anticipated:
function xyz<T, TMultiArray extends T[][]>(arr: TMultiArray): T[] {
// Some pseudo logic that outputs random values
return arr[Math.floor(Math.random() * arr.length)];
}
No more error messages! The default inference for the return type is now unknown[]
xyz([[1], ['word']])
Expectedly, an error pops up when trying this out
const z: number[] = xyz([[2], ['word']]) // Type 'string' is not assignable to type 'number'.
Just starting out with TypeScript and Angular, I've been tasked with creating a typedefinition for a custom library. Despite confirming that the JavaScript from my external library is loading correctly in the resources, I encountered an error when cal ...
I am attempting to implement my own custom palette option in the theme section, but I am struggling with how to do the augmentation part using TypeScript. So far, I have created a file named "material-ui.d.ts" and inside it, I only have: import { PaletteO ...
I'm trying to figure out how to create an object based on a generic type in TypeScript but struggling with the syntax. Here's a simplified example of what I want to achieve: myfunc<T>() : T[] { let obj = new T(); let obj2 = new T() ...
In Visual Studio, our project structure includes the following: PublicClient, Admin, and SharedComponents. The SharedComponents project is essential because many components are shared between our client and admin interface. This structure is based on the f ...
Utilizing ts-morph, I am examining the inheritance relationships of classes in a project: For testing purposes, I have downloaded an open-source projectantv/x6: import { Project } from "ts-morph"; const project = new Project(); project.addDire ...
Is it possible to consistently run function decorator @A before @B, regardless of their position within the class? class Example { @A() public method1(): void { ... } @B() public method2(): void { ... } @A() public method3(): void { ... } } In the sc ...
Within my main class, I have created a two-dimensional array of another class: public class Tic { public static void main(String[] args) { XO board[][] = new XO[3][3]; System.out.println(board[1][1]); } } The following is the object class b ...
I've been facing an issue with refreshing the page in my React app using the Context API. When I refresh the page, I notice the following logs in my console: https://i.sstatic.net/nYTWa.png My context is fetching data from a REST API but only on the ...
VERSION: ^9.3.3 HTML <button (click)="toggleEditing()">{ editing ? 'cancel' : 'editing' }</button> <button>ADD</button> <gridster [options]="options"> &l ...
Currently, I am a beginner in Angular. I recently started integrating MatDialog into my project. To do this, I followed the code provided on the official Angular documentation page https://material.angular.io/components/dialog/overview. However, upon click ...
As I delve into the world of typescript/graphql, I encountered a peculiar issue while trying to define the type for one of my root nodes. The root node in question simply fetches a user by ID in the resolve function, and thus, I assigned the 'type&apo ...
I'm having an issue with a function that toggles a mat-slide-toggle. I need to modify this function to only toggle when the result is false. Currently, it toggles every time, regardless of the result being true or false. I want it to not toggle when t ...
I want to store variables in a static global file, like this: declare const MYVAR = 'Some unchanging data'; Later on, I would like to be able to retrieve the information using just the key 'MYVAR', for example: globalFile.findValue ...
I'm dealing with a Typescript file structured like this: export interface Prisma { // Members } export const Prisma = (): Prisma => { // returns a object with of type Prisma }; Both the interface and the constant share the same name with ...
Encountering an error when running the command git push heroku master? The build step flags an error, even though locally, using identical NodeJS and NPM versions, no such issue arises. All automated tests pass successfully without any errors. How can this ...
My custom TypeScript watcher is set up like this: const compilerHost = typescript.createWatchCompilerHost(config.fileNames, config.options, typescript.sys, undefined, reportDiagnostic) typescript.createWatchProgram(compilerHost) I am trying to integrate ...
Check out this TypeScript code snippet for a quick example. // Setting up the example declare var data:{info?: {details: string}}; function instant(callback: () => void) { callback(); } // Safeguarding the data if (data.info) { console.log(data.inf ...
Is it possible to create an observable that combines two subjects in a unique way, different from the zip function? The goal is to combine two subjects so that when both have emitted values, the latest of their values is emitted. Then, after both emit at ...
We recently upgraded our Angular app from version 4.3.2 to version 7.1.3. All packages were successfully migrated and the angular.json file is pointed to the correct location. However, we are encountering an error in the console stating "Can't bind to ...
Is there a way to retrieve the value of the getLength function without it returning undefined? How can I access the value in this case? Here is my code snippet: const verifyValue = () => { const selector = 'nz-option-container nz-option-item&apo ...