Creating a signature for a function that can accept multiple parameter types in TypeScript

Question

Creating a signature for a function that can accept multiple parameter types in TypeScript

I am facing a dilemma with the following code snippet:

const func1 = (state: Interface1){
    //some code
}

const func2 = (state: Interface2){
    //some other code
}

const func3: (state: Interface1|Interface2){
//some other code
}

However,

func3(func1)

results in an error being thrown.

My intention was to create a function called func3 that is capable of accepting either func1 or func2 as a parameter. How can I achieve this in TypeScript?

typescript

Answer 1

Answer №1

func3 requires passing either Interface1 or Interface2 when calling func1.

The type signature of func1 is:

(state: Interface1) => void

If you intend to pass a callback, the argument type of func3 needs adjustment:


type Interface1 = {
    tag: 'Interface1'
}

type Interface2 = {
    tag: 'Interface2'
}
const func1 = (state: Interface1) => {
    //some code
}

const func2 = (state: Interface2) => {
    //some other code
}

const func3 = (cb: typeof func1 | typeof func2) => {
    //some other code
}

func3(func1) // okay

If you're interested in function composition, check out this article.

UPDATE:

Previous solutions work; however, calling callback is impossible. My mistake, apologies for that.

To enable this functionality, some code refactoring is required as union types alone may not suffice with functions.

Consider the following example:


type Union = typeof func1 | typeof func2

const func3 = (cb: Union) => {
    cb({ tag: 'Interface2' }) // error
}

func3(func1) // okay

In the above scenario, cb is inferred as (arg:never)=>any. Why?

Please refer to @jcalz's excellent answer on intersections.

The crux here is - types in contravariant positions get intersected.

Due to the impossibility of creating Interface1 & Interface2, it resolves to never.

For more insights on contravariance, variance, etc., please visit my question.

Hence, TS struggles to differentiate allowed vs. disallowed arguments.

As witnessed in the example, although func1 was used as an argument, attempting to call the callback with Interface2 could lead to runtime errors.

A workaround can be implemented as follows:

type Interface1 = {
    tag: 'Interface1'
}

type Interface2 = {
    tag: 'Interface2'
}

const func1 = (state: Interface1) => {
    //some code
}

const func2 = (state: Interface2) => {
    //some other code
}

type Fn = (...args: any[]) => any

function func3<Cb extends Fn, Param extends Parameters<Fn>>(cb: Cb, ...args: Param) {
    cb(args)
}

const x = func3(func1, { tag: 'Interface1' }) // okay

Function arguments are contravariant to each other if attempting to create a union of functions leading to errors.

UPDATE 3:

If the desired outcome differs from expectations, utilizing a typeguard within func3 to compute func1 argument is necessary:


type Interface1 = {
    tag: 'Interface1'
}

type Interface2 = {
    tag: 'Interface2'
}
const func1 = (state: Interface1) => {
    //some code
}

const func2 = (state: Interface2) => {
    //some other code
}

type Fn = (a: any) => any

// typeguard
const isFunc = <R extends typeof func1 | typeof func2>(cb: Fn, cb2: R): cb is R => cb === cb2

const func3 = (cb: typeof func1 | typeof func2) => {
    if (isFunc(cb, func1)) {
        cb({ tag: 'Interface1' })
    } else {
        cb({ tag: 'Interface2' })
    }
}

func3(func1) // okay

Answer 2

func3 requires passing either Interface1 or Interface2 when calling func1.

The type signature of func1 is:

(state: Interface1) => void

If you intend to pass a callback, the argument type of func3 needs adjustment:


type Interface1 = {
    tag: 'Interface1'
}

type Interface2 = {
    tag: 'Interface2'
}
const func1 = (state: Interface1) => {
    //some code
}

const func2 = (state: Interface2) => {
    //some other code
}

const func3 = (cb: typeof func1 | typeof func2) => {
    //some other code
}

func3(func1) // okay

If you're interested in function composition, check out this article.

UPDATE:

Previous solutions work; however, calling callback is impossible. My mistake, apologies for that.

To enable this functionality, some code refactoring is required as union types alone may not suffice with functions.

Consider the following example:


type Union = typeof func1 | typeof func2

const func3 = (cb: Union) => {
    cb({ tag: 'Interface2' }) // error
}

func3(func1) // okay

In the above scenario, cb is inferred as (arg:never)=>any. Why?

Please refer to @jcalz's excellent answer on intersections.

The crux here is - types in contravariant positions get intersected.

Due to the impossibility of creating Interface1 & Interface2, it resolves to never.

For more insights on contravariance, variance, etc., please visit my question.

Hence, TS struggles to differentiate allowed vs. disallowed arguments.

As witnessed in the example, although func1 was used as an argument, attempting to call the callback with Interface2 could lead to runtime errors.

A workaround can be implemented as follows:

type Interface1 = {
    tag: 'Interface1'
}

type Interface2 = {
    tag: 'Interface2'
}

const func1 = (state: Interface1) => {
    //some code
}

const func2 = (state: Interface2) => {
    //some other code
}

type Fn = (...args: any[]) => any

function func3<Cb extends Fn, Param extends Parameters<Fn>>(cb: Cb, ...args: Param) {
    cb(args)
}

const x = func3(func1, { tag: 'Interface1' }) // okay

Function arguments are contravariant to each other if attempting to create a union of functions leading to errors.

UPDATE 3:

If the desired outcome differs from expectations, utilizing a typeguard within func3 to compute func1 argument is necessary:


type Interface1 = {
    tag: 'Interface1'
}

type Interface2 = {
    tag: 'Interface2'
}
const func1 = (state: Interface1) => {
    //some code
}

const func2 = (state: Interface2) => {
    //some other code
}

type Fn = (a: any) => any

// typeguard
const isFunc = <R extends typeof func1 | typeof func2>(cb: Fn, cb2: R): cb is R => cb === cb2

const func3 = (cb: typeof func1 | typeof func2) => {
    if (isFunc(cb, func1)) {
        cb({ tag: 'Interface1' })
    } else {
        cb({ tag: 'Interface2' })
    }
}

func3(func1) // okay

Answer 3

Answer №2

In typescript, it's important to note that the language is very strict. This means when using func3, you must be specific about the parameter being passed in. Here's an example of how you can achieve this:

type Interface1={
//insert code here
}
type Interface2={
//insert code here
}
type Interface3 = ((state:Interface1)=>void) | ((state:Interface2)=>void)

const func1 = (state: Interface1)=>{
//insert code here
}

const func2 = (state: Interface2)=>{
//insert code here
}

const func3= (state: Interface3)=>{
//insert code here
}
//both calls to func3 below are valid
func3(func1);
func3(func2);

Answer 4

In typescript, it's important to note that the language is very strict. This means when using func3, you must be specific about the parameter being passed in. Here's an example of how you can achieve this:

type Interface1={
//insert code here
}
type Interface2={
//insert code here
}
type Interface3 = ((state:Interface1)=>void) | ((state:Interface2)=>void)

const func1 = (state: Interface1)=>{
//insert code here
}

const func2 = (state: Interface2)=>{
//insert code here
}

const func3= (state: Interface3)=>{
//insert code here
}
//both calls to func3 below are valid
func3(func1);
func3(func2);

Creating a signature for a function that can accept multiple parameter types in TypeScript

Answer №1

Answer №2

Similar questions

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

Updating the value of a key in an object is not functioning as expected

I am puzzled as to why I am still facing the error message: "'node' is not recognized as an internal or external command, operable program or batch file."

What is the reasoning behind ethers.js choosing to have the return value of a function be an array that contains the value, rather than just the value itself

Utilize cypress to analyze the loading time of a webpage

How can you apply an active class using React-Router?

Cease the generation of dynamically produced sounds

What is the most effective way to handle DOM events in Angular 8?

The name 'console' could not be located

Limiting querySelector to a specific React component: a step-by-step guide

Transform the date format from Google Forms to TypeScript

How can I invoke a TypeScript function within HTML code?

Implementing debounce in Subject within rxjs/Angular2

Can a discriminated union be generated using mapped types in TypeScript?

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Error encountered during compilation while attempting to import a JSON file in Angular 7

After the click event, the variable in the Angular .ts file does not get refreshed

What is the best way to populate empty dates within an array of objects using TypeScript or JavaScript?

Replacing `any` in TypeScript when combining interfaces