How can we determine the type in Typescript generics based on the function argument types?

Question

How can we determine the type in Typescript generics based on the function argument types?

In my method with 2 arguments, I want it to deduce a type from the 1st argument.

For instance, in this code snippet, I aim for the type T of the function create_C<T> to be inferred based on the firstArgument, leading to the return type of create_C being

C<type inferred from firstArgument>

interface C<T> { 
    firstArgument: A<T>;
    secondArgument: (obj: any) => T
}

export interface A<T> {
    type: T;
}

function create_C<T>(
    firstArgument: A<T>,
    secondArgument: (obj: any) => T
): C<T> {
    return {
        firstArgument,
        secondArgument
    }
}

However, in the following scenario, const c is deduced as C<{ prop2: number }>. I anticipate it to be interpreted as C<B>, and an error should trigger, indicating that the return type of secondArgument does not match type B

interface B { 
    prop1: string;
    prop2: number
}

export class B_Component implements A<B> {
    type: B = {
        prop1: "",
        prop2: 1
    };
}

const c = create_C(
    new B_Component(),
    () => ({ prop2: 2 })
)

How can I ensure the compiler raises an error when the return type of secondArgument does not align with type B?

Access the Stackblitz editor here: https://stackblitz.com/edit/qqddsn

typescript typescript-generics

Answer 1

Answer №1

Your function signature should adhere to the following structure:

declare function create_C<T>(a1: A<T>, a2: (obj: any) => T): C<T>;

Within this signature, there are two inference sites for the type parameter T. The first site comes from the type property of the argument a1, and the second site is the return type of the argument a2. When the compiler encounters a call like

create_C(new B_Component(), () => ({ prop2: 2 });

it attempts to infer T from both sources. In certain cases, such as the one mentioned above, this behavior aligns with your expectations.

However, if you prefer the compiler to solely use a1 for type inference and just verify that a2 matches it, you can employ an approach referred to as a "non-inferential type parameter." Although not officially supported, this technique involves modifying a type parameter in an inference site from T to T & {}, which lowers its priority in the inference process.

To implement this workaround, adjust your function signature as follows:

declare function create_C_better<T>(a: A<T>, b: (obj: any) => T & {}): C<T>;

Let's examine some examples:

const c2 = create_C_better(
    new B_Component(),
    () => ({ prop2: 2 }) // error!
    //    ~~~~~~~~~~~~~~ <-- prop1 is missing
)

const c3 = create_C_better(
    new B_Component(),
    () => ({ prop1: "all right", prop2: 2 })
); // C<B>

By making these adjustments, you will receive the desired error notification when prop1 is absent. On rectifying this scenario, the output will be of type C<B>.

Hopefully, these insights prove beneficial to you as you navigate the TypeScript environment. Best of luck!

Click here to access the code snippet

Answer 2

Your function signature should adhere to the following structure:

declare function create_C<T>(a1: A<T>, a2: (obj: any) => T): C<T>;

Within this signature, there are two inference sites for the type parameter T. The first site comes from the type property of the argument a1, and the second site is the return type of the argument a2. When the compiler encounters a call like

create_C(new B_Component(), () => ({ prop2: 2 });

it attempts to infer T from both sources. In certain cases, such as the one mentioned above, this behavior aligns with your expectations.

However, if you prefer the compiler to solely use a1 for type inference and just verify that a2 matches it, you can employ an approach referred to as a "non-inferential type parameter." Although not officially supported, this technique involves modifying a type parameter in an inference site from T to T & {}, which lowers its priority in the inference process.

To implement this workaround, adjust your function signature as follows:

declare function create_C_better<T>(a: A<T>, b: (obj: any) => T & {}): C<T>;

Let's examine some examples:

const c2 = create_C_better(
    new B_Component(),
    () => ({ prop2: 2 }) // error!
    //    ~~~~~~~~~~~~~~ <-- prop1 is missing
)

const c3 = create_C_better(
    new B_Component(),
    () => ({ prop1: "all right", prop2: 2 })
); // C<B>

By making these adjustments, you will receive the desired error notification when prop1 is absent. On rectifying this scenario, the output will be of type C<B>.

Hopefully, these insights prove beneficial to you as you navigate the TypeScript environment. Best of luck!

Click here to access the code snippet

Answer 3

Answer №2

One reason for this is the

secondArgument: (obj: any) => T

. When you apply the definition above to () => ({ prop2: 2 }), the type of T becomes { prop2: number }. You have the flexibility to modify it to achieve the desired outcome. Here is a scenario:

    interface C<T> {
      firstArgument: A<T>;
      secondArgument: (obj: any) => any;
    }

    export interface A<T> {
      type: T;
    }

    declare function create_C<T>(
      firstArgument: A<T>,
      secondArgument: (obj: any) => any
    ): C<T>;

    interface B {
      prop1: string;
      prop2: number;
    }

    export class B_Component implements A<B> {
      type: B;
      configuration: B = {
        prop1: "",
        prop2: 1
      };
    }
    const b = new B_Component();
    export const c = create_C(b, () => ({ prop2: 2 }));

Answer 4

One reason for this is the

secondArgument: (obj: any) => T

. When you apply the definition above to () => ({ prop2: 2 }), the type of T becomes { prop2: number }. You have the flexibility to modify it to achieve the desired outcome. Here is a scenario:

    interface C<T> {
      firstArgument: A<T>;
      secondArgument: (obj: any) => any;
    }

    export interface A<T> {
      type: T;
    }

    declare function create_C<T>(
      firstArgument: A<T>,
      secondArgument: (obj: any) => any
    ): C<T>;

    interface B {
      prop1: string;
      prop2: number;
    }

    export class B_Component implements A<B> {
      type: B;
      configuration: B = {
        prop1: "",
        prop2: 1
      };
    }
    const b = new B_Component();
    export const c = create_C(b, () => ({ prop2: 2 }));

How can we determine the type in Typescript generics based on the function argument types?

Answer №1

Answer №2

Similar questions

Tips for managing promise rejection when generating a highland stream from a promise?

Angular 2.0.1 triggering ngSubmit event twice within forms

What methods are available to rapidly test Firebase functions?

Observable function encountering difficulties returning nested values

Unable to populate an array with a JSON object using Angular framework

Error: unable to locate module that was imported from

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

Simplified Method for Verifying Null and Undefined in Typescript

When Using TypeScript with Serverless, 'this' Becomes Undefined When Private Methods are Called from Public Methods

Transforming a singular function into a versatile, reusable function with the help of Typescript

Issues arise when trying to insert a control based on the index in an Angular Reactive FormArray

"Creating a dynamic TreeList in Ignite UI by linking pairs of names and corresponding

Validating patterns in Angular without using a form

Guide on closing a Bootstrap modal by clicking within the UI Grid in Angular

How can we dynamically enable or disable a button based on the availability of input field data in an Angular FormGroup?

The Angular error message InvalidValueError is thrown when the Map function expects a mapDiv of type HTMLElement, but instead receives a

Property referencing for change detection is a valuable technique

Error Uncovered: Ionic 2 Singleton Service Experiencing Issues

What is the best way to specify the return type of a currying function?

How to Implement the Play/Pause Button in an Angular Application