Exploring the Use of Overloads and Callbacks in TypeScript

Question

Exploring the Use of Overloads and Callbacks in TypeScript

Currently, I am exploring the implementation of the builder pattern and trying to create functions that support optional parameters as arguments. Here is an example of how I am approaching this:

new Service().OnAction(Actions.Add, () => { alert(1); })
    .OnAction(Actions.Subtract, () => { alert(1); })
    .ServiceBuilder(serviceOptions);

new Service().OnAction(Actions.Add, (vm, container) => { 
        vm.FirstName = container.find("data-id=FirstName").val();
        vm.LastName = container.find("data-id=LastName").val();
    })
    .OnAction(Actions.Subtract, (vm, container) => { alert(1); })
    .ServiceBuilder(serviceOptions);

The code above represents some of my attempts in incorporating this feature.

public OnAction(actions: Actions, x: (y?:any, z?:any) => void) {
    if (y != undefined && z != undefined) {
        x(y, z);
    }
    else
        x();

    return this;
}

I have also referred to the following documentation for additional insights: https://www.typescriptlang.org/docs/handbook/functions.html

typescript callback operator-overloading

Answer 1

Answer №1

To enable optional parameters for the method OnAction, you must move the logic that checks for undefined values to the method being passed to x.

Here is an example:

public OnAction(actions: Actions, x: (y?:any, z?:any) => void) {
    x(y, z);
    return this;
}

new Service().OnAction(Actions.Add, (vm, container) => {
    if (vm === undefined && container === undefined) {
        // handle logic for undefined values
        return;
    }

    vm.FirstName = container.find("data-id=FirstName").val();
    vm.LastName = container.find("data-id=LastName").val();
})

In your scenario, it doesn't matter how you call the method x:

x();

or:

x(y, z);
If both <code>y and z are undefined, it has the same effect.

Answer 2

To enable optional parameters for the method OnAction, you must move the logic that checks for undefined values to the method being passed to x.

Here is an example:

public OnAction(actions: Actions, x: (y?:any, z?:any) => void) {
    x(y, z);
    return this;
}

new Service().OnAction(Actions.Add, (vm, container) => {
    if (vm === undefined && container === undefined) {
        // handle logic for undefined values
        return;
    }

    vm.FirstName = container.find("data-id=FirstName").val();
    vm.LastName = container.find("data-id=LastName").val();
})

In your scenario, it doesn't matter how you call the method x:

x();

or:

x(y, z);
If both <code>y and z are undefined, it has the same effect.

Answer 3

Answer №2

During runtime, it becomes difficult to distinguish between function signatures. The Function object has a length property that can indicate the number of parameters in a function. This can be used to differentiate functions based on the number of arguments they accept, although there is a known issue with the length property and optional parameters when transpiling to ES5.

However, the key point here is that it shouldn't matter whether a function actually accepts the parameters or not. You can simply pass all the supported parameters, and if the function uses them, great; if not, no harm is done:

class MyClass {
    
    public OnAction(actions: Actions, x: (y?:any, z?:any) => void) {
        // Here we pass both arguments
        // for demo purposes, argument values are set to null - replace with actual parameters 
        x(null, null); 
     }
}

new MyClass().OnAction(Actions.add, ()=> {}) // Passing arguments that go unused
new MyClass().OnAction(Actions.add, (vm)=> { console.log(vm) }) // One argument being utilized
new MyClass().OnAction(Actions.add, (vm, c)=> { console.log(vm);  console.log(c)}) // Both arguments being utilized

Answer 4

During runtime, it becomes difficult to distinguish between function signatures. The Function object has a length property that can indicate the number of parameters in a function. This can be used to differentiate functions based on the number of arguments they accept, although there is a known issue with the length property and optional parameters when transpiling to ES5.

However, the key point here is that it shouldn't matter whether a function actually accepts the parameters or not. You can simply pass all the supported parameters, and if the function uses them, great; if not, no harm is done:

class MyClass {
    
    public OnAction(actions: Actions, x: (y?:any, z?:any) => void) {
        // Here we pass both arguments
        // for demo purposes, argument values are set to null - replace with actual parameters 
        x(null, null); 
     }
}

new MyClass().OnAction(Actions.add, ()=> {}) // Passing arguments that go unused
new MyClass().OnAction(Actions.add, (vm)=> { console.log(vm) }) // One argument being utilized
new MyClass().OnAction(Actions.add, (vm, c)=> { console.log(vm);  console.log(c)}) // Both arguments being utilized

Exploring the Use of Overloads and Callbacks in TypeScript

Answer №1

Answer №2

Similar questions

The category has been defined but remains inaccessible. What could be the reason for this limitation?

The module './product' could not be located, resulting in error TS2307

The RxJs 'from' function is currently producing an Observable that is unrecognized

Type A can be assigned to the limitation of type T, although T may be instantiated with a varying subtype constraint of either A or B

What is the proper way to define a Map in TypeScript?

In Angular, when using multiple-selection mode in mat selection, the Error Value should always be in the form of

Issue: Only one type can be named "Upload" within Apollo, Express, and Type-Graphql

"Implement a specific background-color for a component in Angular 4 by adding it to the body tag

Incorporate a service into a base class in Angular2 to ensure its functionality extends to all derived classes

Injecting dynamic templates in Angular 7

Most effective methods for validating API data

encountering a problem integrating react-dropzone into a project using react-16.13.1

The React.FC component encountered an invalid hook call

Tips for effectively transmitting data while utilizing a declarative/reactive data access method with RxJS in Angular?

Display a message on React when hovering over

Enhance ReactRouter by incorporating types into the NavLink isActive() function

Is there a way to include values in the body of an HTTP GET request using Angular?

Converting Typescript to Javascript: How to export a default object

Empty screen on the RadCartesianChart

What is the process for implementing token authentication within headers using an interceptor, especially when the token may be null?