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

The attribute 'forEach' is not recognized on the data type 'string | string[]'

Testing a function within a class using closure in Javascript with Jest

Attempting to create a login feature using phpMyAdmin in Ionic framework

Tips for extracting a keyword or parameters from a URL

incorrect indexing in ordered list

Sorting through a JavaScript array

Instructions for disabling editing for a specific cell within an inline editable row in primeNG

Issues with Angular 4 Rxjs subject subscription functionality

There seems to be an issue in Angular as it is unable to retrieve /

Executing npm prepublish on a complete project

Angular2 authguards encountering issues when trying to run asynchronous functions

My component fails to load using Angular Router even though the URL is correct

Using TypeScript's type casting functionality, you can easily map an enum list from C#

Encountering an issue in a Next.js application while building it, where an error is triggered because the property 'protocol' of 'window.location' cannot be destructured due to being undefined

Definition of Stencil Component Method

Shifting Angular Component Declarations to a New Location

Array of dynamically typed objects in Typescript

The type '{ children: ReactNode; }' does not share any properties with the type 'IntrinsicAtrributes'

Analysis of cumulative revenue using Palantir Foundry Function

Utilizing numerical values in useParams - A beginner's guide