Understanding the infer keyword in Typescript when working with generic type constraints

Exploring a scenario where I have a generic interface that requires a type argument extending another generic type.

export interface IPoint<TX, TY>
{
    x: TX;
    y: TY;
}
export interface ISeries<TPoint extends IPoint>
{
    points: Array<TPoint>;
}

The challenge arises when defining TX and TY for IPoint.

An inquiry emerges: is there a way to automatically deduce these types? For instance, like this:

export interface ISeries<TPoint extends IPoint<infer TX, infer TY>>
{
    points: Array<TPoint>;
}

Currently, the only workaround I've discovered is specifying TX and TY as type parameters for ISeries, which can be cumbersome due to repeated type specifications.

Alternatively, using IPoint<any, any> lacks precision regarding the actual types of x and y.

To provide more context on the desired outcome, consider this example:

export interface ISeries<TPoint extends IPoint<infer TX, infer TY>>
{
    points: Array<TPoint>;
    transformYValues?: (yValue: TY) => number;
}

In this case, requiring TY to robustly type transformYValues becomes essential.

Thank you for your assistance.

UPDATE: Managed to find a solution (credit to captain-yossarianfromUkraine).

export interface ISeries<TPoint extends IPoint<any, any>>
{
    points: Array<TPoint>;
    transformYValues?: (yValue: TPoint['y']) => number;
}

The key lies in TPoint['y'], leveraging Indexed Access Types to aptly define methods/properties within the interface. (See https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html).

To sum up => employ any typing in generic type constraints, then utilize indexed access types for precise typing of methods/properties within the interface.

Answer №1

Let's explore this scenario:

export interface Point<A, B> {
  a: A;
  b: B;
}

type Data = string | number

export interface Set<Items extends Point<Data, Data>[]> {
  items: Items;
  updateValues: (value: Items[number]['b']) => number;
}

const deduction = <
  A extends Data,
  B extends Data,
  Points extends Point<A, B>[]
>(input: Set<[...Points]>) => null


deduction({
  items: [{ a: 'apple', b: 22 }, { a: 'banana', b: 99 }],
  updateValues: (argument) => {
    argument // 22 | 99
    return 42
  }
})

Explore Here

I introduced the Data type as an inclusion for valid a and b data formats.

Moreover, I implemented a function named deduction to utilize generic conditional types and function inputs for type inference.

To deduce specific type literals like a:'apple' b:22, I utilized variadic tuple types, demonstrated with [...Points]

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

Encountering a Vueify Typescript error in a Vue project

Recently diving into the world of Vue, I was able to successfully create a sample app using gulp, vueify, and TypeScript. To showcase what's happening and shed light on an issue I'm facing, here are snippets of the key code segments: Menu.ts im ...

Ensuring the selected date matches any consecutive dates within the dates array in Angular

Imagine if 01/01/2022 is chosen from the input field, and my array of dates looks something like this: ['31/12/2021', '01/11/2021', '02/01/2022'...] In this scenario, when '31/12/2021' and '02/01/2022' are ...

Invoking a controller from another controller in the Express framework using Typescript

Currently, I am trying to call a controller from another controller in my code. While attempting to pass parameters using {params: {task_id: String(task_id), result}}, TypeScript is flagging an error indicating that res does not have all the required attri ...

Encountering a service error that results in the inability to read properties of undefined when passing a method as a

Whenever I attempt to pass a service function as a parameter to another function, an error 'Cannot read properties of undefined myService' occurs during execution. However, calling this.myService.method() individually works perfectly fine without ...

Declaration of dependencies for NestJS must include dependencies of dependencies

I'm encountering an issue where NestJS is not automatically resolving dependencies-of-dependencies: I have created an AWSModule which is a simple link to Amazon AWS with only a dependency on the ConfigService: @Module({ imports: [ConfigModule], ...

NextJS compilation sometimes results in undefined errors when using Sass styles

My peace lies in the sass code: .link display: inline-table text-align: center align-self: center margin: 5px 15px font-size: 20px color: black text-decoration: none transition: 0.1s ease-in-out .link:hover text-decoration: underline .l ...

How can you limit a type reference to a specific file in TypeScript?

Currently, I am working on writing universal JavaScript code that can be used in both Node and browser environments. While most of the code works independent of the environment, there are certain parts where different implementations are required based on ...

Are generic constraints leading to type inference selecting the incorrect candidate?

TypeScript Version: 2.6.0-dev.20170826 and 2.4.2 I'm questioning whether I've encountered a TypeScript inference bug or limitation, or if my code is simply incorrect. If the code is valid and it's an issue with type inference, I will repor ...

ViewChild with the focus method

This particular component I'm working on has a hidden textarea by default : <div class="action ui-g-2" (click)="toggleEditable()">edit</div> <textarea [hidden]="!whyModel.inEdition" #myname id="textBox_{{whyModel.id}}" pInputTextarea f ...

Refreshing a page in Angular 4/5 using TypeScript

I am currently working on a single-page application that utilizes routes for navigation: this.router.navigate(['/customer-home'], { skipLocationChange: true }); While on the customer home page, I have a feature to add a new customer via a REST ...

What is the reason behind prettier's insistence on prefixing my IIAFE with ";"?

I've encountered async functions in my useEffect hooks while working on a JavaScript project that I'm currently transitioning to TypeScript: (async ():Promise<void> => { const data = await fetchData() setData(data) })() Previously, ...

How can I enable dragging functionality for components (not elements) in angular?

While utilizing the Angular CDK drag and drop module, I have observed that it functions seamlessly on html elements like div, p, etc. However, when I apply a cdkDrag directive to a component, it does not seem to work as expected. <!-- IT WORKS --> ...

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when s ...

Sharing data between components in Angular 2 using the <router-outlet> technique

Having just started exploring Angular 2, I am eager to pass a boolean value from one component to another using <router-outlet> After some research, it seems like the best approach is to utilize a service. My aim is to toggle a boolean variable in ...

Is there a way to transfer innerHTML to an onClick function in Typescript?

My goal is to pass the content of the Square element as innerHTML to the onClick function. I've attempted passing just i, but it always ends up being 100. Is there a way to only pass i when it matches the value going into the Square, or can the innerH ...

Creating object types in typescript from object keys: a step-by-step guide

In my JavaScript object, I have two keys named foo and bar. const x = { foo: '', bar: '' } I also have a function called abc that takes a value (which can only be either foo or bar). function abc(value: string) { const selected = x[v ...

The TypeScript, NextJS project is encountering an issue where it is unable to read the property 'cwd' due to a TypeError

I've noticed this particular error popping up frequently online, but it's not quite matching the issue I'm facing. Every time I execute yarn dev, I encounter the following error: next-dev.js?53bc:89 Error was not caught TypeError: Cannot re ...

Loading a large quantity of items into state in React Context using Typescript

I am currently working on a React context where I need to bulk load items into the state rather than loading one item at a time using a reducer. The issue lies in the Provider initialization section of the code, specifically in handling the api fetch call ...

The function is attempting to access the 'lockDatabase' property of an undefined object, resulting in an error

I'm encountering an error due to the scope issue with 'this', and I'm struggling to find a solution. I attempted using the fat arrow, which solved the scope problem but created another issue where I lack a callback value that needs to b ...

Achieving a Subset Using Functional Programming

Looking for suggestions on implementing a function that takes an array A containing n elements and a number k as input. The function should return an array consisting of all subsets of size k from A, with each subset represented as an array. Please define ...