打字稿：这个函数的主体在哪里定义，泛型真的被使用了吗？

Question

I was having a look at the documentation of Angular's "AsyncPipe" and I got kind of stuck in line 26, where the ' resolve ' function is called: this.resolve !('hi there!');

Could anyone answer the following questions:

• (A) Where is the body of the function defined? I tried the code and played a bit around, changing the type and amount of parameters, for example: resolve(1, 'hello', true) , or resolve(1) , or resolve() . In every case, the value of the FIRST parameter was returned (it was an empty output in the last case), but I do not see anywhere such a function definition.
• (B) I see that in line 19 the Promise is defined with <string> . Nonetheless, as shown in (A), I was able to pass and return strings, numbers, booleans... perhaps I misunderstood what this typing is suposed to do?

Thanks!

Answer 1

A couple of things to address here:

(A) resolve is a specific function to Promises along with the function reject . They are your asynchronous functions to determine what to do with the result ( resolve ) or the error ( reject ). The resolve function returns the first parameter and nothing else, if you need to return more than one value it can be done in an object.

(B) Typescript only exists in the IDE/code editor, not at runtime. Typescript at runtime is transpiled down to JavaScript and a lot of the functionality (generics included) are lost in the browser. The generics are there to help you when developing your code so you don't run a Number function on a String, or some similar idea. So when you get to running the Angular application you'll be able to send in anything you want, but in development your IDE should warn you if the types mismatch (especially if you are using tslint with your development tools)

Answer 2

The this.resolve function is assigned at line 19:

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

The Promise<string> only defines the variable resolve should accept a string argument (ie resolve: (string) => void ).

this.resolve is defined in line 13:

private resolve: Function|null = null;

Because it is defined with type Function|null , it does not restrict on the number of arguments it should be called with nor the type of those arguments.

It is referenced with ! (in this.resolve!(...) ) because its type has null in it, and the ! tells the compiler that the value is not null or undefined at that moment.

The example is not that well written. It could be improved like this:

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 are:

• removing the null and null initialization:
  • there is no reason to initialize the value with null ,
  • the constructor calls this.reset() which set those properties immediately. So they will not be null.
  • always use undefined if you really need to (JavaScript should not have two bottom values to begin with).
  • now you can skip the ! in this.resolve!()
• private resolve: (string) => void :
  • always be specific when possible.