Using Typescript to define unions with multiple callback types

Question

Using Typescript to define unions with multiple callback types

While in the process of converting my code to TypeScript, I encountered a dilemma. I created a generic foreach function that can handle arrays and objects, with different types of callbacks for iteration. However, I'm unsure how to specify the type when it accepts multiple callback options. The function should be able to return either boolean or void, and accept callbacks of (any), (any, int), or (string, any) types. Here is what I have so far:

function foreach(obj: Array<any> | Object, func: (
            ((any) => boolean) |
            ((any) => void) |
            ((any, int) => boolean) |
            ((any, int) => void) |
            ((string, any) => boolean) |
            ((string, any) => void)
))
{
    // if obj is an array ...
    if(Object.prototype.toString.call(obj) === '[object Array]') {
        // if using callback def1
        if(func.length == 1) {  
            for(let i = 0; i < obj.length; i++)  {
                if(typeof func === "function") {
                    if(!func(obj[i])) break;
                }
            }
        // if using callback def2
        } else if(func.length == 2) { 
            for(let i = 0; i < obj.length; i++) {
                if(!func(obj[i], i)) break; 
            }
        }
    // if obj is an object ...
    } else if(Object.prototype.toString.call(obj) == '[object Object]') {
        // if using callback def1
        if(func.length == 1) {
            for(let key in obj) {
                if(!obj.hasOwnProperty(key)) continue;
                if(!func(obj[key])) break; 
            }
        // if using callback def3
        } else if(func.length == 2) {
            for(let key in obj) {
                if(!obj.hasOwnProperty(key)) continue;
                if(!func(key, obj[key])) break; 
            }
        }
    }
};

javascript typescript

Answer 1

Answer №1

Here is a sample code snippet for a foreach function in TypeScript:

function foreach<T>(obj : T[], func: (item: T) => void)
function foreach<T>(obj : T[], func: (item: T) => boolean)
function foreach<T>(obj : T[], func: (item: T, index: number) => boolean)
function foreach<T>(obj : T[], func: (item: T, index: number) => void)
function foreach<T>(obj : {[key: string]: T}, func: (item: T) => boolean)
function foreach<T>(obj : {[key: string]: T}, func: (item: T) => void)
function foreach<T>(obj : {[key: string]: T}, func: (key: string, item: T) => boolean)
function foreach<T>(obj : {[key: string]: T}, func: (key: string, item: T) => void)
function foreach<T>(obj : T[] | {[key: string]: T}, func : (item : T | string, index ?: number | T) => (boolean | void))
{
    // Implementation of the foreach function goes here
};

For example usage and tips on how to use intellisense with this function, you can refer to the following images:

Example of usage: https://i.sstatic.net/ykRR7.png https://i.sstatic.net/fUaL3.png

To make the most out of intellisense: https://i.sstatic.net/dI4Sp.png

Answer 2

Here is a sample code snippet for a foreach function in TypeScript:

function foreach<T>(obj : T[], func: (item: T) => void)
function foreach<T>(obj : T[], func: (item: T) => boolean)
function foreach<T>(obj : T[], func: (item: T, index: number) => boolean)
function foreach<T>(obj : T[], func: (item: T, index: number) => void)
function foreach<T>(obj : {[key: string]: T}, func: (item: T) => boolean)
function foreach<T>(obj : {[key: string]: T}, func: (item: T) => void)
function foreach<T>(obj : {[key: string]: T}, func: (key: string, item: T) => boolean)
function foreach<T>(obj : {[key: string]: T}, func: (key: string, item: T) => void)
function foreach<T>(obj : T[] | {[key: string]: T}, func : (item : T | string, index ?: number | T) => (boolean | void))
{
    // Implementation of the foreach function goes here
};

For example usage and tips on how to use intellisense with this function, you can refer to the following images:

Example of usage: https://i.sstatic.net/ykRR7.png https://i.sstatic.net/fUaL3.png

To make the most out of intellisense: https://i.sstatic.net/dI4Sp.png

Answer 3

Answer №2

To simplify your code, consider leveraging generic functions (functions parameterized by types, such as function foo<T>), optional arguments (using ?), and multiple function signature declarations. This approach will help eliminate the need for unions and any types.

It is advisable to split your function into two separate functions. TypeScript does not support polymorphism in terms of dispatching to different implementations at runtime. Therefore, treating arrays and objects as distinct entities and writing dedicated functions for each is a better practice than relying on pseudo-polymorphism. Be explicit in your code to enhance clarity and maintainability.

Your revised code structure would resemble the following:

function forEachArray<T>(
  array: Array<T>, 
  func?: (value: T, index?: number): boolean
): void {
  for (let i = 0; i < obj.length; i++)  {
    if (func && !func(array[i], i)) break;
  }
}

function forEachObject<T>(
  object: {[index: string]: T}, 
  func?: (value: T, key?: string): boolean
): void {
  for (let key of Object.keys(object)) {
    if (func && !func(object[key], key)) break;
  }
}

The updated implementation introduces the use of optional arguments denoted by the question mark (?) symbol and generics to ensure data homogeneity within arrays or objects. By enforcing type restrictions, you can maintain consistency and avoid errors in function calls. Optionally, you can relax these constraints by specifying forEachObject<any>.

In terms of design considerations, it's recommended to standardize the callback return type rather than allowing both boolean and void options. Additionally, you can make parameters like the index or key optional using ? in the function signature.

For enhanced functionality resembling Array#forEach, you may also include a third parameter for the context ("thisArgs") and pass the underlying array or object as an argument to the callback function.

If you prefer a unified foreach function capable of handling both arrays and objects, employing multiple function signatures preceding the implementation can achieve this goal efficiently.

// Code example for combined foreach function
// Type definition for compactness
type Hash<T> = {[index: string]: T};

function foreach<T>(
  array: Array<T>, 
  func?: (value: T, index?: number, array?: Array<T>): boolean,
  thisArg?: Object
): void;

function foreach<T>(
  object: Hash<T>,
  func?: (value: T, key?: string, object?: Hash<T>): boolean,
  thisArg?: Object
): void;

function foreach(thing, func?, thisArg?) {
  (thing instanceof Array ? forEachArray : forEachObject)(thing, func, thisArg);
}

Note that when defining multiple function signatures, you are not required to specify types in the final implementation, as they would be disregarded during execution.

Please bear in mind that the code snippets provided have not been tested or compiled yet.

Answer 4

To simplify your code, consider leveraging generic functions (functions parameterized by types, such as function foo<T>), optional arguments (using ?), and multiple function signature declarations. This approach will help eliminate the need for unions and any types.

It is advisable to split your function into two separate functions. TypeScript does not support polymorphism in terms of dispatching to different implementations at runtime. Therefore, treating arrays and objects as distinct entities and writing dedicated functions for each is a better practice than relying on pseudo-polymorphism. Be explicit in your code to enhance clarity and maintainability.

Your revised code structure would resemble the following:

function forEachArray<T>(
  array: Array<T>, 
  func?: (value: T, index?: number): boolean
): void {
  for (let i = 0; i < obj.length; i++)  {
    if (func && !func(array[i], i)) break;
  }
}

function forEachObject<T>(
  object: {[index: string]: T}, 
  func?: (value: T, key?: string): boolean
): void {
  for (let key of Object.keys(object)) {
    if (func && !func(object[key], key)) break;
  }
}

The updated implementation introduces the use of optional arguments denoted by the question mark (?) symbol and generics to ensure data homogeneity within arrays or objects. By enforcing type restrictions, you can maintain consistency and avoid errors in function calls. Optionally, you can relax these constraints by specifying forEachObject<any>.

In terms of design considerations, it's recommended to standardize the callback return type rather than allowing both boolean and void options. Additionally, you can make parameters like the index or key optional using ? in the function signature.

For enhanced functionality resembling Array#forEach, you may also include a third parameter for the context ("thisArgs") and pass the underlying array or object as an argument to the callback function.

If you prefer a unified foreach function capable of handling both arrays and objects, employing multiple function signatures preceding the implementation can achieve this goal efficiently.

// Code example for combined foreach function
// Type definition for compactness
type Hash<T> = {[index: string]: T};

function foreach<T>(
  array: Array<T>, 
  func?: (value: T, index?: number, array?: Array<T>): boolean,
  thisArg?: Object
): void;

function foreach<T>(
  object: Hash<T>,
  func?: (value: T, key?: string, object?: Hash<T>): boolean,
  thisArg?: Object
): void;

function foreach(thing, func?, thisArg?) {
  (thing instanceof Array ? forEachArray : forEachObject)(thing, func, thisArg);
}

Note that when defining multiple function signatures, you are not required to specify types in the final implementation, as they would be disregarded during execution.

Please bear in mind that the code snippets provided have not been tested or compiled yet.

Using Typescript to define unions with multiple callback types

Answer №1

Answer №2

Similar questions

What could be causing the error in the console when I try to declare datetime in Ionic?

Implementing a hamburger menu and social media sharing buttons on websites

JavaScript - Attempting to retrieve data using AJAX

Is it possible to show or hide a DIV based on the text content of another DIV using JavaScript in

html input type called array named AmountMap[1] is unable to be configured with <input type="textbox" size="15" name="amountMap[1]" value="0" >

I am curious about the inner workings of the `createApplication()` function in the ExpressJS source code. Can you shed some light on

Insert the user's choice as a MenuItem within the Select component

My attempt at creating a straightforward sorting function turned out to be ineffective

What is the best way to import a file in meteor version 1.3?

What is causing my AJAX Contact Form to navigate away from the original page?

Import an array of dynamic modules with Webpack that are known during compilation

Issue with Refreshing onRowAdd in React Material Table

The parameter type 'IScriptEditorProps' does not accept arguments of type 'string'

Using a variable in Ajax URL with Action razor syntax

Tips for implementing an if else statement in ReactJS while utilizing the useEffect hook

Establishing a default value as undefined for a numeric data type in Typescript

What is the best way to capture the output of a script from an external website using Javascript when it is returning simple text?

An issue of "SignatureDoesNotMatch" arises while trying to send an email using Node AWS SDK for the Simple Email Service

Instructions for adding an onfocus event listener to an input field in order to dynamically change the formatting of associated labels

Is there a way to trigger an Angular $scope function from a hyperlink in the current or a new tab using a right