Creating a mandatory parameter in TypeScript function

Question

Creating a mandatory parameter in TypeScript function

Consider the code snippet below:

type NoArg = {
  (): void
}

type OneArg = {
  (x:number): void
}

let noArg: NoArg = (x:number)=>{}
let oneArg: OneArg = ()=>{}

The first assignment results in a compiler error, which is expected because JavaScript allows functions to be passed with fewer arguments than defined. This distinction is important when it comes to how a function is called, rather than how it's passed. More information on this topic can be found in the FAQ.

Is there a way to create a version of the OneArg interface that will not work with a zero argument function? While solutions like branding or nominal typing can achieve this, they require additional steps during assignment (such as adding the _brand property explicitly).

So, is it possible to design a type NoArg that would prevent a simple assignment like let oneArg: OneArg = ()=>{} from succeeding?

The FAQ mentioned earlier states that "There is currently not a way in TypeScript to indicate that a callback parameter must be present." Does this completely eliminate the possibility of achieving my goal? I hope not, as this scenario involves something other than a callback parameter, but the underlying concept might be similar.

UPDATE: The comments brought up the idea of using a type guard test to accomplish this. However, it seems unlikely due to the overlap in types preventing the type guard from narrowing down the options. You can experiment with this in this playground.

typescript

Answer 1

Answer №1

Following a productive conversation with @aluan-haddad, I have devised a partial solution that may not exactly align with my initial request. It involves creating a "discriminator" function to differentiate between two types of functions based on their parameters and apply the appropriate branded type.

This solution leverages a conditional type along with the fact that one-argument functions are incompatible with zero-argument ones (even though the reverse is not true) to enforce correct typings.

type NoArg = {
    _brand: 'NoArg'
    (): void
}

type OneArg = {
  _brand: 'OneArg'
  (x: number): void
}

// Valid typings
let noArg: NoArg = discriminator(() => {})
let oneArg: OneArg = discriminator((x: number) => {})

// Both of these result in errors as intended!
let noArgError: NoArg = discriminator((x: number) => {})
let oneArgError: OneArg = discriminator(() => {})

function discriminator<T extends (x: any) => any>(myFunc: T) {
    let discriminatedFunc
    if (myFunc.length === 0) {
        discriminatedFunc = {
            _brand: 'NoArg',
            myFunc
        }
    } 
    else {
        discriminatedFunc = {
            _brand: 'OneArg',
            myFunc
        }
    }
    return discriminatedFunc as unknown as T extends () => any ? NoArg : OneArg
}

Check it out on TypeScript playground.

Note: The reliance on the incompatibility between one argument and zero-argument functions for this solution is evident. The reversed version of the conditional type

T extends (x: number) => any ? OneArg : NoArg

will not work as it always resolves to OneArg.

Is this approach preferable to initially branding the functions via constructor functions? I believe so, as it only requires one discriminator function compared to two branding functions and does not mandate knowing the function signatures upfront when passing them to the discriminator.

If anyone identifies any issues with this solution or has alternative suggestions, please share! Is there a more efficient way, or is this the limit of TypeScript capabilities?

Answer 2

Following a productive conversation with @aluan-haddad, I have devised a partial solution that may not exactly align with my initial request. It involves creating a "discriminator" function to differentiate between two types of functions based on their parameters and apply the appropriate branded type.

This solution leverages a conditional type along with the fact that one-argument functions are incompatible with zero-argument ones (even though the reverse is not true) to enforce correct typings.

type NoArg = {
    _brand: 'NoArg'
    (): void
}

type OneArg = {
  _brand: 'OneArg'
  (x: number): void
}

// Valid typings
let noArg: NoArg = discriminator(() => {})
let oneArg: OneArg = discriminator((x: number) => {})

// Both of these result in errors as intended!
let noArgError: NoArg = discriminator((x: number) => {})
let oneArgError: OneArg = discriminator(() => {})

function discriminator<T extends (x: any) => any>(myFunc: T) {
    let discriminatedFunc
    if (myFunc.length === 0) {
        discriminatedFunc = {
            _brand: 'NoArg',
            myFunc
        }
    } 
    else {
        discriminatedFunc = {
            _brand: 'OneArg',
            myFunc
        }
    }
    return discriminatedFunc as unknown as T extends () => any ? NoArg : OneArg
}

Check it out on TypeScript playground.

Note: The reliance on the incompatibility between one argument and zero-argument functions for this solution is evident. The reversed version of the conditional type

T extends (x: number) => any ? OneArg : NoArg

will not work as it always resolves to OneArg.

Is this approach preferable to initially branding the functions via constructor functions? I believe so, as it only requires one discriminator function compared to two branding functions and does not mandate knowing the function signatures upfront when passing them to the discriminator.

If anyone identifies any issues with this solution or has alternative suggestions, please share! Is there a more efficient way, or is this the limit of TypeScript capabilities?

Creating a mandatory parameter in TypeScript function

Answer №1

Similar questions

Converting JS carousel to TS for showcasing multiple items

Having trouble with React state not updating?

the advantages of enforcing a type instance over using typeof in TypeScript

When using Vite with TypeScript in a React project, type declarations may not be discovered when importing components

Ensuring correct association of values to avoid redundancies

Effective method of delegating a section of a reactive form to a child component in Angular 5

NPM: There are no valid TypeScript file rules specified

Switching jQuery toggle effects to Angular framework

The issue of data not appearing in Angular Ionic has been identified, and this problem arises due

Error message: "Supabase connection is returning an undefined value

Leverage the power of React, Material-UI, and Typescript to inherit button props and incorporate a variety of unique

Encountering a Typescript error with Next-Auth providers

Issues with Angular 2 and Deserialization of .NET List<T>

Tips for effectively utilizing Mongoose models within Next.js

Exploring TypeScript integration with Google Adsense featuring a personalized user interface

What's causing Angular to not display my CSS properly?

The passing of data as query params between components is not working when using React Typescript Router version 5.1.8

Using the useRef hook to target a particular input element for focus among a group of multiple inputs

Efficient methods to transfer values or arrays between components in Angular 8 without relying on local storage

javascript + react - managing state with a combination of different variable types