Why is it possible in Angular Typescript to assign a Promise<ClassA> to an object of ClassA?

Question

Why is it possible in Angular Typescript to assign a Promise<ClassA> to an object of ClassA?

Recently, I started learning Angular and came across this snippet of code in my company's project:

currentCDFlow: CDCurrentFlowDTO;

this.currentCDFlow = await this.serivce.getCDMaster();

The code for getCDMaster() looks like this:

public async getCDMaster(): Promise<CDCurrentFlowDTO> {
    return await this.http.post<CDCurrentFlowDTO>(Constants.BASE_HREF + '/getCDMaster', null, this.RequestJson).toPromise().catch(err => { throw err });
  }

My question is, since getCDMaster() is returning a Promise<CDCurrentFlowDTO> (a Promise object), how is it allowed to be assigned to an object of type CDCurrentFlowDTO directly? I would expect it to only be assignable to an object of type Promise<CDCurrentFlowDTO>, not just CDCurrentFlowDTO without being enclosed in a Promise<...>.

In Java, for example:

String a = new ArrayList<String>();

would result in a compile error...

Is this a feature specific to TypeScript?

java angular typescript promise

Answer 1

Answer №1

The utilization of async/await syntax enables currentCDFlow to be assigned the value from the promise. This functionality is part of ES6. Asynchronous functions are identified by the async keyword, and await pauses the process until the promise is resolved, then retrieves the result.

Answer 2

The utilization of async/await syntax enables currentCDFlow to be assigned the value from the promise. This functionality is part of ES6. Asynchronous functions are identified by the async keyword, and await pauses the process until the promise is resolved, then retrieves the result.

Answer 3

Answer №2

The explanation lies in the concept of a `Promise`. A promise serves as a representation of an asynchronous operation or, in simpler terms, a guarantee of a future outcome. The success of your code in the task is attributed to the utilization of the `await` keyword within the function call. By employing the `await` syntax with `Promise<T>`, the program pauses execution until the promise is fulfilled, ensuring the retrieval of the promised object. This synchronous handling accounts for the functionality...

For further enlightenment, consider exploring this resource:

Update

Let’s employ your code as an illustrative demonstration...you have the subsequent function defined

public async getCDMaster(): Promise<CDCurrentFlowDTO> {
  return await this.http.post<CDCurrentFlowDTO>(Constants.BASE_HREF + '/getCDMaster', null, this.RequestJson).toPromise().catch(err => { throw err });
}

/*
and then you call it here...
*/

// Firstly, you define the variable as of type CDCurrentFlowDTO, expecting a
// return of Promise<CDCurrentFlowDTO> so let’s see how this operates...
currentCDFlow: CDCurrentFlowDTO;

/*
Since the await syntax imposes a wait for the Promise return, the following call shall suffice
*/
this.currentCDFlow = await this.serivce.getCDMaster();

/*
Nevertheless, without the await:
*/
this.service.getCDMaster() // we anticipate the output of Promise<CDCurrentFlowDTO>

If an asynchronous execution is still desired, a solution may look like this...

//...

currentCDFlow: CDCurrentFlowDTO;

this.service.getCDMaster().then((result) => {
  currentCDFlow = result;

  //upon logging here, the value should display
  console.log(currentCDFlow);
});
// logging here would output undefined since the Promise is pending
console.log(currentCDFlow);

The inclusion of `async` in the function definition is surplus as any `async` function inherently yields a `Promise`, redundant when awaiting an existing `Promise` return...a revised approach could be

publicgetCDMaster(): Promise<CDCurrentFlowDTO> {
  return this.http.post<CDCurrentFlowDTO>(Constants.BASE_HREF + '/getCDMaster', null, this.RequestJson).toPromise().catch(err => { throw err });
}

Answer 4

The explanation lies in the concept of a `Promise`. A promise serves as a representation of an asynchronous operation or, in simpler terms, a guarantee of a future outcome. The success of your code in the task is attributed to the utilization of the `await` keyword within the function call. By employing the `await` syntax with `Promise<T>`, the program pauses execution until the promise is fulfilled, ensuring the retrieval of the promised object. This synchronous handling accounts for the functionality...

For further enlightenment, consider exploring this resource:

Update

Let’s employ your code as an illustrative demonstration...you have the subsequent function defined

public async getCDMaster(): Promise<CDCurrentFlowDTO> {
  return await this.http.post<CDCurrentFlowDTO>(Constants.BASE_HREF + '/getCDMaster', null, this.RequestJson).toPromise().catch(err => { throw err });
}

/*
and then you call it here...
*/

// Firstly, you define the variable as of type CDCurrentFlowDTO, expecting a
// return of Promise<CDCurrentFlowDTO> so let’s see how this operates...
currentCDFlow: CDCurrentFlowDTO;

/*
Since the await syntax imposes a wait for the Promise return, the following call shall suffice
*/
this.currentCDFlow = await this.serivce.getCDMaster();

/*
Nevertheless, without the await:
*/
this.service.getCDMaster() // we anticipate the output of Promise<CDCurrentFlowDTO>

If an asynchronous execution is still desired, a solution may look like this...

//...

currentCDFlow: CDCurrentFlowDTO;

this.service.getCDMaster().then((result) => {
  currentCDFlow = result;

  //upon logging here, the value should display
  console.log(currentCDFlow);
});
// logging here would output undefined since the Promise is pending
console.log(currentCDFlow);

The inclusion of `async` in the function definition is surplus as any `async` function inherently yields a `Promise`, redundant when awaiting an existing `Promise` return...a revised approach could be

publicgetCDMaster(): Promise<CDCurrentFlowDTO> {
  return this.http.post<CDCurrentFlowDTO>(Constants.BASE_HREF + '/getCDMaster', null, this.RequestJson).toPromise().catch(err => { throw err });
}

Answer 5

Answer №3

Clarification on your original query

await

Utilizing await extracts the resulting value from the promise.

Therefore, the following line of code

this.currentCDFlow = await this.serivce.getCDMaster();

essentially assigns the resolved Promise value from the method to this.currentCDFlow.

If you omit await in the assignment, TypeScript will throw an error since you are attempting to assign a promise to a non-promise object.

currentCDFlow: CDCurrentFlowDTO;
this.currentCDFlow = this.serivce.getCDMaster(); //TS error

Response to the secondary question in your comment

async

Upon specifying a function with the async keyword, it will invariably result in a Promise, regardless of the operations within (including a return await ...).

Refer to this for more information:

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

Dependent on the JS version in use, it will either be managed inherently by JS (commencing from ES8) or in transpiled TS code.

Therefore, all functions below, for example, will yield a Promise. Feel free to test them within your browser's console

async function test()
{
    return "value";
}

async function test2()
{
    return Promise.resolve("value");
}

async function test3()
{
    return await Promise.resolve("value");
}

console.log(test()); //Promise {<resolved>: "value"}
console.log(test2()); //Promise {<resolved>: "value"}
console.log(test3()); //Promise {<resolved>: "value"}

Hence, return myPromise and return await myPromise typically yield similar outcomes, with particular exceptions like try/catch blocks, as elaborated here.

Answer 6

Clarification on your original query

await

Utilizing await extracts the resulting value from the promise.

Therefore, the following line of code

this.currentCDFlow = await this.serivce.getCDMaster();

essentially assigns the resolved Promise value from the method to this.currentCDFlow.

If you omit await in the assignment, TypeScript will throw an error since you are attempting to assign a promise to a non-promise object.

currentCDFlow: CDCurrentFlowDTO;
this.currentCDFlow = this.serivce.getCDMaster(); //TS error

Response to the secondary question in your comment

async

Upon specifying a function with the async keyword, it will invariably result in a Promise, regardless of the operations within (including a return await ...).

Refer to this for more information:

Async functions always return a promise. If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.

Dependent on the JS version in use, it will either be managed inherently by JS (commencing from ES8) or in transpiled TS code.

Therefore, all functions below, for example, will yield a Promise. Feel free to test them within your browser's console

async function test()
{
    return "value";
}

async function test2()
{
    return Promise.resolve("value");
}

async function test3()
{
    return await Promise.resolve("value");
}

console.log(test()); //Promise {<resolved>: "value"}
console.log(test2()); //Promise {<resolved>: "value"}
console.log(test3()); //Promise {<resolved>: "value"}

Hence, return myPromise and return await myPromise typically yield similar outcomes, with particular exceptions like try/catch blocks, as elaborated here.

Why is it possible in Angular Typescript to assign a Promise<ClassA> to an object of ClassA?

Answer №1

Answer №2

Update

Answer №3

Similar questions

Strategies for Implementing Responsive Design in Angular and Bootstrap Shopping Cart Apps to Deliver Custom Views on Mobile and Desktop Devices

How can you notify a component, via a service, that an event has occurred using Subject or BehaviorSubject?

How to display a festive greeting on the specific holiday date using the ngx-bootstrap datepicker

What could be the reason for the UnkownOperatorException failing to be thrown?

atom-typescript - What could be causing the unrecognized Typescript configuration options?

Managing button spacing with Bootstrap 4 in an Angular 2 CLI application

Eslint highlighting the initial function declaration within a Vue script

Why isn't Nodemon monitoring the directory in webpack-typescript-node.js?

How can I ensure thorough test coverage without relying on Testbed?

Transform Text into Numeric Value/Date or Null if Text is Invalid

How to use D3 to add arrow directions to an SVG path

Integrating Jetty and Jersey into my Java project: a comprehensive guide

Error class not being applied by Knockout validation

Establishing default parameters for angular pipes

Leveraging jQuery within a webpack module shared across multiple components, located outside the webpack root directory

How can one retrieve the Title of an inner frame using Selenium WebDriver?

Passing data from child to parent in Angular using EventEmitter

Visual Studio 2015 is struggling to locate a specific module, yet the command line interface for

PhpStorm does not currently support types in JavaScript

The union type consisting of String, Boolean, and Number in type-graphql has encountered an error