Where can the body of this function be located in Typescript and do the generics serve a practical purpose?

Question

Where can the body of this function be located in Typescript and do the generics serve a practical purpose?

While perusing the documentation for Angular's "AsyncPipe", I found myself at a standstill on line 26, where the 'resolve' function is invoked: this.resolve !('hi there!');

I have some questions on my mind:

(A) Where is the implementation of this function located? After experimenting with different parameters and types such as resolve(1, 'hello', true), resolve(1), or resolve(), I noticed that in every scenario, the value of the FIRST parameter was returned (an empty output in the last case), even though I couldn't find where this function is defined.
(B) Line 19 specifies the Promise with <string>, but as seen in (A), I successfully passed and received strings, numbers, booleans... Did I misconstrue the purpose of this typing?

Any insights would be greatly appreciated!

angular typescript

Answer 1

Answer №1

Here are a couple of points to consider:

(A) The resolve function, along with reject, is specific to Promises. These functions are used asynchronously to determine how to handle the result (resolve) or an error (reject). The resolve function only returns the first parameter; if you need to return multiple values, consider using an object.

(B) Typescript is only present in the IDE/code editor, not during runtime. At runtime, Typescript is transpiled into JavaScript, and some features (such as generics) may be lost in the browser. Generics help ensure you don't mistakenly use a Number function on a String, for example. While you can input any type in Angular applications, during development, your IDE should notify you of any type mismatches (especially if you are utilizing tslint with your development tools).

Answer 2

Here are a couple of points to consider:

(A) The resolve function, along with reject, is specific to Promises. These functions are used asynchronously to determine how to handle the result (resolve) or an error (reject). The resolve function only returns the first parameter; if you need to return multiple values, consider using an object.

(B) Typescript is only present in the IDE/code editor, not during runtime. At runtime, Typescript is transpiled into JavaScript, and some features (such as generics) may be lost in the browser. Generics help ensure you don't mistakenly use a Number function on a String, for example. While you can input any type in Angular applications, during development, your IDE should notify you of any type mismatches (especially if you are utilizing tslint with your development tools).

Answer 3

Answer №2

The function this.resolve is set on line 19:

this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });

The Promise<string> specifies that the variable resolve should only accept a string argument (i.e. resolve: (string) => void).

this.resolve is declared on line 13:

private resolve: Function|null = null;

Since it is defined with type Function|null, there are no restrictions on the number or type of arguments it can be called with.

An exclamation point ! is used when referencing it (as in this.resolve!(...)) because its type includes null, and the ! asserts to the compiler that the value is not null at that particular point.

The provided example code could be improved as follows:

export class AsyncPromisePipeComponent {
  greeting: Promise<string>;
  arrived: boolean = false;

  private resolve: (string) => void;

  constructor() { this.reset(); }

  reset() {
    this.arrived = false;
    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
  }

  clicked() {
    if (this.arrived) {
      this.reset();
    } else {
      this.resolve('hi there!');
      this.arrived = true;
    }
  }
}

The changes made include:

Removing the null initialization:
- No need to initialize with null,
- Calling this.reset() in the constructor ensures these properties are immediately set, avoiding any chance of being null.
- Prefer using undefined when necessary.
- This allows for skipping the ! in this.resolve!().
```
private resolve: (string) => void
```
:
- Being specific when declaring types is encouraged.

Answer 4

The function this.resolve is set on line 19:

this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });

The Promise<string> specifies that the variable resolve should only accept a string argument (i.e. resolve: (string) => void).

this.resolve is declared on line 13:

private resolve: Function|null = null;

Since it is defined with type Function|null, there are no restrictions on the number or type of arguments it can be called with.

An exclamation point ! is used when referencing it (as in this.resolve!(...)) because its type includes null, and the ! asserts to the compiler that the value is not null at that particular point.

The provided example code could be improved as follows:

export class AsyncPromisePipeComponent {
  greeting: Promise<string>;
  arrived: boolean = false;

  private resolve: (string) => void;

  constructor() { this.reset(); }

  reset() {
    this.arrived = false;
    this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
  }

  clicked() {
    if (this.arrived) {
      this.reset();
    } else {
      this.resolve('hi there!');
      this.arrived = true;
    }
  }
}

The changes made include:

Removing the null initialization:
- No need to initialize with null,
- Calling this.reset() in the constructor ensures these properties are immediately set, avoiding any chance of being null.
- Prefer using undefined when necessary.
- This allows for skipping the ! in this.resolve!().
```
private resolve: (string) => void
```
:
- Being specific when declaring types is encouraged.

Where can the body of this function be located in Typescript and do the generics serve a practical purpose?

Answer №1

Answer №2

Similar questions

Using a function call disrupts the current scope

Exploring the Implementation of the DELETE Method in Angular 5

Dealing with Error TS2769 in Visual Studio Code when passing props to a custom component in Vue 2 with Typescript

Enhancing Javascript-written React components with Typescript typings

Creating a unique type with a suffix of `px`

Creating PropTypes from TypeScript

Tips for infuriating TSC with Lookup categories

What could be causing the Toast message to not show up in react-native-root-toast?

Display text inputted by the user in a paragraph using Angular upon clicking a button

Modifying state within reducers is not allowed

Fashion for the repetitive elements, activated by events

Angular 5 Directive for Structuring Content

Observables and the categorization of response data

angular determine if a column exists within a matCellDef iteration

Running "npm start" does not automatically recompile or display code changes

React does not allow _id to be used as a unique key

Displaying only the most recent 5 messages using *ngFor

Prevent the array from altering its values

Creating a personalized 404 page in your Angular Project and configuring a route for it

The JestImportMeta interface is mistakenly extending the ImportMeta interface, causing an error