Struggling to grasp the Typescript syntax

Question

Struggling to grasp the Typescript syntax

I'm just starting out with Typescript and I could use some guidance in deciphering a piece of code.

The code snippet is as follows:

addSilentCallBackHandler(): void {
  this.mgr.signinSilentCallback().then(callback());    
}

function callback(): (value: any) => void | PromiseLike<void> {
  return (data: any) => {
    console.debug("callback");
  };
}

In the code, when this.mgr.signinSilentCallback() is called, it triggers the 'then' function. My goal is to pass the callback function as an argument in the addSilentCallBackHandler method. However, I am struggling with the syntax. The return type seems to be a function that again returns another function? Can someone please clarify how the callback function works?

By the way, mgr refers to the 'UserManager' within the OidcClient library, which is used for JWT token management.

angular typescript

Answer 1

Answer №1

When the callback function is called, it will return a union type. This can be a function (specifically of type (value:any) => void) OR a PromiseLike<void> object. In this context, we see that it actually returns a function. The returned function is then passed to then and will only be invoked once the Promise coming from signinSilentCallback() is resolved.

The flow goes like this: signinSilentCallback() initiates a Promise and carries out some tasks asynchronously, usually involving HTTP requests. We instruct the Promise to execute whatever is returned by callback() upon resolution. As soon as the asynchronous task completes, the Promise resolves and triggers the execution of console.debug("callback").

To enhance the example further, another option could be added to callback() where it returns a PromiseLike:

function callback(): ((value: any) => void) | PromiseLike<void> {
    // It has two possible outcomes:
    if (/*...*/) {
        // a ((value: any) => void)
        return (data: any) => {
            console.debug("callback");
        };
    } else {
        // or a PromiseLike<void>
        return new Promise<void>((resolve) => {
        console.debug("callback 2");
        resolve();
    });
}
}

If the distinction between the two types is unnecessary, it would be simpler to directly pass a function as the callback instead of creating it within another function.

addSilentCallBackHandler(): void {
   this.mgr.signinSilentCallback().then(callback);
}

function callback() {
   console.log('callback');
}

Answer 2

When the callback function is called, it will return a union type. This can be a function (specifically of type (value:any) => void) OR a PromiseLike<void> object. In this context, we see that it actually returns a function. The returned function is then passed to then and will only be invoked once the Promise coming from signinSilentCallback() is resolved.

The flow goes like this: signinSilentCallback() initiates a Promise and carries out some tasks asynchronously, usually involving HTTP requests. We instruct the Promise to execute whatever is returned by callback() upon resolution. As soon as the asynchronous task completes, the Promise resolves and triggers the execution of console.debug("callback").

To enhance the example further, another option could be added to callback() where it returns a PromiseLike:

function callback(): ((value: any) => void) | PromiseLike<void> {
    // It has two possible outcomes:
    if (/*...*/) {
        // a ((value: any) => void)
        return (data: any) => {
            console.debug("callback");
        };
    } else {
        // or a PromiseLike<void>
        return new Promise<void>((resolve) => {
        console.debug("callback 2");
        resolve();
    });
}
}

If the distinction between the two types is unnecessary, it would be simpler to directly pass a function as the callback instead of creating it within another function.

addSilentCallBackHandler(): void {
   this.mgr.signinSilentCallback().then(callback);
}

function callback() {
   console.log('callback');
}

Answer 3

Answer №2

mgr.signinSilentCallback().then is a function that sets the on complete handler, which is a function with a parameter value.

To properly add the callback handler, you should do

this.mgr.signinSilentCallback().then(callback)

. In this way, you are passing a reference to the function. Calling it like

this.mgr.signinSilentCallback().then(callback())

would pass in the result of the function, which is a Promise.

Your callback function should just handle the response from the Promise and not return another function.

addSilentCallBackHandler(): void {
      this.mgr.signinSilentCallback().then(callback);    
  }

callback(value: any): void {
    console.debug("callback");
}

Answer 4

mgr.signinSilentCallback().then is a function that sets the on complete handler, which is a function with a parameter value.

To properly add the callback handler, you should do

this.mgr.signinSilentCallback().then(callback)

. In this way, you are passing a reference to the function. Calling it like

this.mgr.signinSilentCallback().then(callback())

would pass in the result of the function, which is a Promise.

Your callback function should just handle the response from the Promise and not return another function.

addSilentCallBackHandler(): void {
      this.mgr.signinSilentCallback().then(callback);    
  }

callback(value: any): void {
    console.debug("callback");
}

Struggling to grasp the Typescript syntax

Answer №1

Answer №2

Similar questions

Extraction of properties from an object in an ES6 class

Failed to build development environment: Unable to assign the attribute 'fileSystem' to a null value

Omit certain table columns when exporting to Excel using JavaScript

Enhance user interaction in Angular 13 by animating a selected element using just one animation block

The isAuthenticated status of the consumer remains unchanged even after being modified by a function within the AuthContext

Tips for executing embedded scripts within templates

What is the process for re-exporting global.d.ts typings in a third-party JavaScript project?

Create a dropdown selection menu that is populated with options determined by the input

Solving the issue: Angular - Troubleshooting problems when downloading files from a Web API

Typescript: Enhance your coding experience with intelligent parameter suggestions for functions

Creating Tab-Focused Accessibility in HTML Fragment (Modal Window)

Learn the steps to dynamically show a navbar component upon logging in without the need to refresh the page using Angular 12

Using nested *ngFor in combination with Bootstrap collapse features

A guide on implementing Angular ngbPopover within a CellRenderer for displaying in an ag-grid cell

Angular failing to recognize the && operator

What is the best way to ensure an observable has finished before retrieving a value?

Utilizing type guards in prop functions for conditional rendering within React TypeScript adds an extra layer

The routing navigate method is failing to direct to the desired component

Volar and vue-tsc are producing conflicting TypeScript error messages

Encountering the error message "This expression cannot be invoked" within a Typescript React Application