Leveraging Typescript Generics for limiting the input parameter of a function

Question

Leveraging Typescript Generics for limiting the input parameter of a function

Issue

I have developed a Typescript package to share types between my backend node firebase cloud functions and frontend React client that accesses them. Provided below are examples of the types:

interface FirstFunctionInput {
  x: number
}

interface SecondFunctionInput {
  y: string
}

// lists all available functions
enum FirebaseFunction {
  FirstFunction = "firstFunction",
  SecondFunction = "secondFunction"
}

Currently, I am invoking the functions using the firebase sdk:

firebase.funtions.httpsCallable('firstFunction')({ x: 21 })
  .then(result => { ... })

The challenge at hand is:

There is no assurance that the function 'firstFunction' exists.
Even if it does, how can one confirm that it accepts a parameter like { x: 21 }.

Thus, I aim to create a utility method using Generics that resolves these issues.

Preferred Solution

Desired API representation is provided in the example below. A scenario where an incorrect input type is passed to the function is outlined, anticipating Typescript to flag an error.

callFirebaseFunction<FirstFunction>({ y: 'foo' })
                                    ^----------^
                    display error here as FirstFunction should accept a FirstFunctionInput

Current Progress (not fully achieved yet)

I have made progress towards this goal with a functioning API, although input parameters must be specified during the call:

callFirebaseFunction<FirstFunctionInput>(
  FirebaseFunction.FirstFunction,
  { x: 21 }
)
.then(result => { ... })

This setup is not ideal since the programmer needs knowledge of the input type to specify.

Closing Thoughts

Despite attempting various strategies involving interfaces extension, abstract classes extension, and even the builder pattern, I struggle to consolidate everything. Is such a solution feasible?

typescript generics typescript-generics

Answer 1

Answer №1

When using the httpsCallable method without specifying a generic type, it is advisable to wrap it in a function and use generics to define the type.

Understanding concepts like Currying can be helpful in maintaining the structure of the code similar to the original.

interface FirstFunctionInput {
  x: number
}

interface SecondFunctionInput {
  y: string
}

interface FunctionInputs {
  firstFunction: FirstFunctionInput,
  secondFunction: SecondFunctionInput
}

function callFirebaseFunction<K extends keyof FunctionInputs>(fn: K) {
  return function (input: FunctionInputs[K]) {
    return firebase.functions().httpsCallable(fn)(input);
  };
};

callFirebaseFunction('firstFunction')({ x: 1 }) // OK
callFirebaseFunction('secondFunction')({ y: '1' }) // OK
callFirebaseFunction('test')({ x: 1 }) // ERROR
callFirebaseFunction('secondFunction')({ x: true }) // ERROR

Additional Update

If you wish to specify the output type for the response, you can do so by:

allFirebaseFunction('firstFunction')({ x: 1 }).then((res) => /* specify type of res */)

In the source code, the type of HttpsCallableResult interface is defined as follows:

export interface HttpsCallable {
    (data?: any): Promise<{data: any}>;
  }

It would be advantageous to extend the output type with {data: any}.

To achieve this, we can modify the code as shown below:

interface FunctionInputs {
  firstFunction: {
    input: FirstFunctionInput,
    output: { data: number }
  },
  secondFunction: {
    input: SecondFunctionInput,
    output: { data: boolean }
  }
}

function callFirebaseFunction<K extends keyof FunctionInputs>(fn: K) {
  return function (input: FunctionInputs[K]['input']): Promise<FunctionInputs[K]['output']> {
    return firebase.functions().httpsCallable(fn)(input);
  };
};

callFirebaseFunction('firstFunction')({ x: 1 }).then(res => { /* { data: number } */ })
callFirebaseFunction('secondFunction')({ y: '1' }).then(res => {/* { data: boolean } */ })

Answer 2

When using the httpsCallable method without specifying a generic type, it is advisable to wrap it in a function and use generics to define the type.

Understanding concepts like Currying can be helpful in maintaining the structure of the code similar to the original.

interface FirstFunctionInput {
  x: number
}

interface SecondFunctionInput {
  y: string
}

interface FunctionInputs {
  firstFunction: FirstFunctionInput,
  secondFunction: SecondFunctionInput
}

function callFirebaseFunction<K extends keyof FunctionInputs>(fn: K) {
  return function (input: FunctionInputs[K]) {
    return firebase.functions().httpsCallable(fn)(input);
  };
};

callFirebaseFunction('firstFunction')({ x: 1 }) // OK
callFirebaseFunction('secondFunction')({ y: '1' }) // OK
callFirebaseFunction('test')({ x: 1 }) // ERROR
callFirebaseFunction('secondFunction')({ x: true }) // ERROR

Additional Update

If you wish to specify the output type for the response, you can do so by:

allFirebaseFunction('firstFunction')({ x: 1 }).then((res) => /* specify type of res */)

In the source code, the type of HttpsCallableResult interface is defined as follows:

export interface HttpsCallable {
    (data?: any): Promise<{data: any}>;
  }

It would be advantageous to extend the output type with {data: any}.

To achieve this, we can modify the code as shown below:

interface FunctionInputs {
  firstFunction: {
    input: FirstFunctionInput,
    output: { data: number }
  },
  secondFunction: {
    input: SecondFunctionInput,
    output: { data: boolean }
  }
}

function callFirebaseFunction<K extends keyof FunctionInputs>(fn: K) {
  return function (input: FunctionInputs[K]['input']): Promise<FunctionInputs[K]['output']> {
    return firebase.functions().httpsCallable(fn)(input);
  };
};

callFirebaseFunction('firstFunction')({ x: 1 }).then(res => { /* { data: number } */ })
callFirebaseFunction('secondFunction')({ y: '1' }).then(res => {/* { data: boolean } */ })

Leveraging Typescript Generics for limiting the input parameter of a function

Issue

Thus, I aim to create a utility method using Generics that resolves these issues.

Preferred Solution

Current Progress (not fully achieved yet)

Closing Thoughts

Answer №1

Additional Update

Similar questions

The argument with type 'void' cannot be assigned to a parameter with type 'Action'

Tips for displaying an element for each item chosen in a multi-select box

Issue: The module '@nx/nx-linux-x64-gnu' is not found and cannot be located

React typescript: When defining an interface in RouterProps, it is important to remember that it can only extend an object type or a combination of object types

Error Encountered: Monorepo Shared Package Not Detected in Docker-Compose Execution

Error TS2339: The 'phoneType' property cannot be found on the 'Object' data type

Problem encountered in a simple Jest unit test - Unexpected identifier: _Object$defineProperty from babel-runtime

Is it possible to deactivate the error message related to "Unable to ascertain the module for component..."?

Disabling `no-dupe-keys` in ESLint does not seem to be effective

Tips for ensuring your controls function properly and seamlessly when switching to another page

Search through an array of objects and assign a new value

Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

Error occurred when sending form data while uploading a file

Sending various kinds of generic types to React component properties

When iterating through a table, an error occurs stating that the property "rows" is not available on type HTMLElement (

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error

A guide to strictly defining the subclass type of object values in TypeScript

Looking for a more efficient approach to writing React styles for color?

Is there a way for me to verify that the key of one object is a subset of the keys of another object?

The subsequent code still running even with the implementation of async/await