How can we create a unique type in Typescript for a callback that is void of any return value?

Question

How can we create a unique type in Typescript for a callback that is void of any return value?

When it comes to safe callbacks, the ideal scenario is for the function to return either undefined or nothing at all.

Let's test this with the following scenarios:

declare const fn1: (cb: () => void) => void;
fn1(() => '123'); // no error

Unfortunately, this didn't work out as expected. It seems that string is not compatible with void.

Next up:

declare const fn2: (cb: () => unknown) => void;
fn2(() => '123'); // no error

To our surprise, the same issue occurred. Let's try something else.

Testing again:

declare const fn3: (cb: () => undefined) => void;
fn3(() => '123'); // error: Type 'string' is not assignable to type 'undefined'

Progress! An error was thrown this time. Let's proceed with this approach:

fn3(() => undefined); // okay
fn3(() => {}); // error: Type 'void' is not assignable to type 'undefined'

This doesn't meet our requirements.

Considering a different route:

declare const fn4: (cb: () => void | undefined) => void;
fn4(() => undefined); // okay
fn4(() => { }); // okay
fn4(() => '123'); // error: Type 'string' is not assignable to type 'undefined'

Success! This seems like a viable solution.

However, why does void allow string, while void | undefined does not? Is this a bug?

Is it safe to assume this behavior will remain consistent in future TypeScript updates? Are there better alternatives to achieve the same outcome?

typescript types

Answer 1

Answer №1

UPDATED 2

If you want to define a callback that shouldn't have any arguments, not even optional ones, and should not return anything, here's how you can do it:

type callback = (...a: void[]) => void | undefined;

const func = (a: callback) => { 
    a();
};

const test1 = func(() => { }); // works
const test2 = func((a?: string) => { }); // fails
const test3 = func(() => '5'); // fails

UPDATED

After discussions in the comments, it was determined that the goal is not just to ignore the return value of the callback, but rather to guarantee that it won't return anything else so it can be safely passed to other functions that rely on this behavior.

In this case, I suggest adding a small helper function that truly ignores any returned value.

const shutUp = <T extends (...args: any) => void>(func: T): ((...args: Parameters<T>) => void) => (...args: any[]) => {
    func(...args);
};

const shutUpNoArgs = <T extends () => void>(func: T): ((...args: never) => void) => () => {
    func();
};

const test = shutUp((a: string) => 5);

const result1 = test('5'); // works, result1 is void.
const result2 = test(5); // doesn't work.

_.forEach(data, shutUp(callback));

ORIGINAL

There's no need to be overly strict or worried about these details.

The use of void implies that we don't consider the return value, which is fine if we are not depending on it.

It's similar to rejecting a function because it doesn't require our a argument, even though it can still be functional without it.

declare const fn1: (cb: (a: string) => void) => void;

fn1(() => {
}); // No error, even when 'a' is not used in the callback.

For further information, refer to the TypeScript documentation on void.

void is somewhat like the opposite of any: indicating the absence of having any specific type at all.

Therefore, its behavior remains consistent, and it can be utilized in union with undefined as needed.

Answer 2

UPDATED 2

If you want to define a callback that shouldn't have any arguments, not even optional ones, and should not return anything, here's how you can do it:

type callback = (...a: void[]) => void | undefined;

const func = (a: callback) => { 
    a();
};

const test1 = func(() => { }); // works
const test2 = func((a?: string) => { }); // fails
const test3 = func(() => '5'); // fails

UPDATED

After discussions in the comments, it was determined that the goal is not just to ignore the return value of the callback, but rather to guarantee that it won't return anything else so it can be safely passed to other functions that rely on this behavior.

In this case, I suggest adding a small helper function that truly ignores any returned value.

const shutUp = <T extends (...args: any) => void>(func: T): ((...args: Parameters<T>) => void) => (...args: any[]) => {
    func(...args);
};

const shutUpNoArgs = <T extends () => void>(func: T): ((...args: never) => void) => () => {
    func();
};

const test = shutUp((a: string) => 5);

const result1 = test('5'); // works, result1 is void.
const result2 = test(5); // doesn't work.

_.forEach(data, shutUp(callback));

ORIGINAL

There's no need to be overly strict or worried about these details.

The use of void implies that we don't consider the return value, which is fine if we are not depending on it.

It's similar to rejecting a function because it doesn't require our a argument, even though it can still be functional without it.

declare const fn1: (cb: (a: string) => void) => void;

fn1(() => {
}); // No error, even when 'a' is not used in the callback.

For further information, refer to the TypeScript documentation on void.

void is somewhat like the opposite of any: indicating the absence of having any specific type at all.

Therefore, its behavior remains consistent, and it can be utilized in union with undefined as needed.

How can we create a unique type in Typescript for a callback that is void of any return value?

Answer №1

Similar questions

Typescript type for selecting only string[] keys in an object

Converting Data Types in Typescript

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

Type of JavaScript map object

Is there a way to verify if an object adheres to a specified interface?

Unable to access 'this' within a custom operator in RxJs

The method beforeEach in angular2/testing seems to be failing as it is not

`Is there a way to assign multiple parameters to HttpParams within Angular 5?`

"Retrieving an element from an array may result in a value of

The component 'ProtectRoute' cannot be utilized within JSX

ReactForms Deprication for NgModel

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

Is there a way to achieve region collapsing and expanding using #region / #endregion in TypeScript within Visual Studio Community Edition 2019?

Can you explain the purpose of the "letter:" included in the code and how it is utilized?

Discovering the permissible array values from numerous arrays inside an object using TypeScript

What is the best way to define a global variable in TypeScript and access it throughout a Vue application?

Guide to integrating a native web component into Vue3

Having Trouble Setting Default Value in React Typescript MUI Autocomplete

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

Utilize string values as identifiers in type declarations