Typescript empty callback function

Question

In my angular project i have a method that takes two callback functions, one for success one for fail which currently looks like:

somefunction(function(token) {
    console.log('Got token: ' + token);
  }, function(error) {
    console.log('Failed to get token', error);
});

Lets say I want to keep the error handling but im not interested in the success callback, what is the proper way to still handle the error callback? Should I create an empty success method like:

somefunction(function(token) {
  }, function(error) {
    console.log('Failed to get token', error);
});

should i give null as first parameter?

somefunction(null, function(error) {
    console.log('Failed to get token', error);
});

Im not sure if there are any dangers of using null and I should just add an empty function (which looks redundant).\

edit: the function is from a library, I prefer to not touch the library.

This is really a matter of preference and consistency. I prefer a no-op func () => {} or () => 0 because you're then respecting the method signature (i.e. passing in a function when a function is expected). Passing in null would require checking for null in someFunction, which may lead to uncertainty down the line as to which params of which functions are null-checked and which are not. — junvar
– junvar, Commented Jan 6, 2020 at 14:54
Well this is typescript not JavaScript so this should not be an issue. If the method signature supports null use null(most don't usually they expect undefined). This is why you use Typescript in the first place. — Filip Cordas
– Filip Cordas, Commented Jan 6, 2020 at 15:09
If you can, your function should return a promise, and then you could use the catch function on it to only worry about the error. — Nicolas
– Nicolas, Commented Jan 6, 2020 at 15:54
Make the error callback the first argument and the second one (which is success) optional. The code is cleaner that way. — crownlessking
– crownlessking, Commented Jan 6, 2020 at 15:57
@crownlessking its a method from a library, I prefer to not touch the library — Sven van den Boogaart
– Sven van den Boogaart, Commented Jan 6, 2020 at 16:00

Filip Cordas · Accepted Answer · 2020-01-06 15:50:47Z

I will try to give a more in-depth explanation of my comment. What you are doing seams to be an old school JavaScript coding the type of coding TypeScript was invented to prevent. In JavaScript you have two type of "empty" values that are similar but not the same null and undefined. For a while now in TypeScript all values are non nulluble by default that means unlike in JavaScript you will get a compiler error if you try to put null or undefined in a function. So if your somefunction looks like this.

function someFunction(success: (token: string) => void, error: (error:string) => void) {

}

A call like somefunction(null, (e) =>{}) will not compile at all because everything is not nullable by default. And you must give it an empty callback like somefunction(()=>{}, () =>{}) you can see that you don't event need the token parameter because any paraatreless function can be cast to a parameter function. If the creator of some function allowed "null" in type script he would have defined like so

function someFunction(success?: (token: string) => void, error?: (error:string) => void) {

}

Where the ? is a shorter way of writing () => void | undefined. Now you can call it with someFunction(undefined, ()=>{}); but a call someFunction(null, ()=>{}); will produce an error since null is not equal (===) undefined. This is the most common way to allow empty calls to functions in TypeScript. If you really want a null value you can define somefunction like so

function someFunction(success: ((token: string) => void) | null, error: ((error:string) => void) | null) {

    }

This is really uncommon in typescript and way two if what most people use. But since you asked about "best practices" from what I can see what you are doing is some async workflow and modern JavaScript and typescript tend to preferer Promises and in angular Observables(The two are not mutually exclusive and can work well together).

Nicolas · Accepted Answer · 2020-01-06 16:08:15Z

If you prefer to use a much more ES6 way, you could wrap this function into a promise. This will allow you to use the function then and catch on this function.

A simple way to do this is to create a new Promise and pass the resolve and reject as parameter to the function.

let myPromise = new Promise((resolve, reject) => {
    somefunction((item) => { resolve(item) }, (error) => { reject(error) });
   // or even somefunction(resolve, reject);
});

You can then use this promise as any other promise. In your case ;

myPromise.catch((error) => {
    console.error(error);
});

This seams far fetch for what you are trying to do, but you could wrap this into a function and use it everywhere you have to use the library function.

function toPromise(fnc) {
    return new Promise((resolve, reject)  => fnc(resolve, reject));
}

toPromise(somefunction).catch((error) => {
   //handle the error
});

Here i have use only arrow function, but you could use normal callback function if you'd like.

Collectives™ on Stack Overflow

Typescript empty callback function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related