Exploring the functionality of the Typescript Parameters<> utility type within a generic function

Question

Exploring the functionality of the Typescript Parameters<> utility type within a generic function

I am facing a situation where I have the following class structure:

class MyTestClass {
  getValue<T>(group: string, defaultVal: T): T {}
}

I want to use the Parameters value in order to simplify unit testing for this class (using a slightly contrived example to illustrate my point)


const argList1: Parameters<MyTestClass['getValue']> = ['group_1', 123];

const service = new MyTestClass();

const testValue1 = service.getValue<number>(...argList1);

However, I encounter the following error on the last line of code:

Argument of type 'unknown' is not assignable to parameter of type 'number'.ts(2345)

This issue arises because T is not defined in the Parameters<> definition.

I have attempted various approaches with angle brackets but haven't found a solution. Is there a way to achieve this? I don't want to leave T undefined when calling the function as it results in manual casting and makes the code messy.

typescript generics

Answer 1

Answer №1

Issue

The Parameters<MyTestClass['getValue']> function can capture the parameter types of getValue in a tuple, but it struggles to determine the type of T due to its generic nature. Consequently, TypeScript interprets T as unknown when utilizing Parameters since it lacks explicit type hints.

This necessitates manual assistance from developers to help TypeScript deduce the correct type.

Resolution Strategy

class MyTestClass {
  getValue<T>(group: string, defaultVal: T): T {
    // Assume some logic here that returns T
    return defaultVal;
  }
}

// Function wrapper for invoking getValue with inferred types
function callGetValueWithInference<T>(
  instance: MyTestClass,
  ...args: Parameters<MyTestClass['getValue']>
): T {
  // TypeScript infers T based on the type of args[1]
  return instance.getValue(...args);
}

// Implementation
const service = new MyTestClass();
const argList1: Parameters<MyTestClass['getValue']> = ['group_1', 123];

// TypeScript correctly deduces T as number from argList1[1]
const testValue1 = callGetValueWithInference(service, ...argList1);
console.log(testValue1); // Outputs: 123

Explanation

Original Code:

getValue dictates that T must be a number.
Parameters<MyTestClass['getValue']> yields a tuple type [string, unknown] because TypeScript struggles to discern the true identity of T during parameter extraction. The open-ended generic type T defaults to being unknown.
Upon spreading argList1 into service.getValue(...argList1), argList1[1] holds an unknown type which clashes with the anticipated number type, leading to a TypeScript error.

Wrapper Function:

The utility function callGetValueWithInference refrains from explicitly defining the type T during getValue invocation.
Rather, by leveraging the value within args[1] (in this case, 123), TypeScript infers T as number.
This approach functions effectively as it allows TypeScript to infer the generic type T during the function call (callGetValueWithInference(service, ...argList1)) based on the concrete value (123) passed through argList1.

While appearing somewhat unconventional and potentially unnecessary for many scenarios, this inference wrapper technique can be employed to outsmart TypeScript in such situations where manual type casting seems cumbersome.

Answer 2

Issue

The Parameters<MyTestClass['getValue']> function can capture the parameter types of getValue in a tuple, but it struggles to determine the type of T due to its generic nature. Consequently, TypeScript interprets T as unknown when utilizing Parameters since it lacks explicit type hints.

This necessitates manual assistance from developers to help TypeScript deduce the correct type.

Resolution Strategy

class MyTestClass {
  getValue<T>(group: string, defaultVal: T): T {
    // Assume some logic here that returns T
    return defaultVal;
  }
}

// Function wrapper for invoking getValue with inferred types
function callGetValueWithInference<T>(
  instance: MyTestClass,
  ...args: Parameters<MyTestClass['getValue']>
): T {
  // TypeScript infers T based on the type of args[1]
  return instance.getValue(...args);
}

// Implementation
const service = new MyTestClass();
const argList1: Parameters<MyTestClass['getValue']> = ['group_1', 123];

// TypeScript correctly deduces T as number from argList1[1]
const testValue1 = callGetValueWithInference(service, ...argList1);
console.log(testValue1); // Outputs: 123

Explanation

Original Code:

getValue dictates that T must be a number.
Parameters<MyTestClass['getValue']> yields a tuple type [string, unknown] because TypeScript struggles to discern the true identity of T during parameter extraction. The open-ended generic type T defaults to being unknown.
Upon spreading argList1 into service.getValue(...argList1), argList1[1] holds an unknown type which clashes with the anticipated number type, leading to a TypeScript error.

Wrapper Function:

The utility function callGetValueWithInference refrains from explicitly defining the type T during getValue invocation.
Rather, by leveraging the value within args[1] (in this case, 123), TypeScript infers T as number.
This approach functions effectively as it allows TypeScript to infer the generic type T during the function call (callGetValueWithInference(service, ...argList1)) based on the concrete value (123) passed through argList1.

While appearing somewhat unconventional and potentially unnecessary for many scenarios, this inference wrapper technique can be employed to outsmart TypeScript in such situations where manual type casting seems cumbersome.

Exploring the functionality of the Typescript Parameters<> utility type within a generic function

Answer №1

Issue

Resolution Strategy

Similar questions

Converting a string to a Date using TypeScript

Merging arrays with the power of ES6 spread operator in Typescript

What type of event is triggered by the "change" event in Vue.Draggable?

How can I simulate a callback function that was not tested?

Generating a collection of generic objects in C# using dictionaries

Navigating back to the login page in your Ionic V2 application can be achieved by utilizing the `this.nav

Checking for a base class in Typescript

Angular - Delay template loading until data is received

What function does the ng-template serve when encapsulated within an ng-select component?

Issue: The code is throwing an error "TypeError: Cannot read property 'push' of undefined" in the JavaScript engine "Hermes

Guide to creating a function and exporting it to a component in react with the help of typescript

Vue | The module does not have a default export statement

Mastering the art of Promises and handling errors

What causes the useEffect hook to render twice in a Next.js application?

insert a gap between two elements in the identical line

Are there any restrictions on the amount of data that can be included in a Sankey diagram created from an Excel sheet? I would

Reactjs may have an undefined value for Object

Incorporating Angular, Angular UI, and Typescript while using the "controller as" approach

Using custom properties from the Material-UI theme object with custom props in Emotion styled components: a step-by-step guide

The module "node_modules/puppeteer/lib/types" does not contain the export "Cookie"