How to use Typescript with native ES6 Promise?

In the ES6 version of ECMAScript, promises were introduced for the first time.

To use the ES6 promises in the TypeScript project, users need to modify the tsconfig.json file.

Add the following code inside the ‘compilerOptions’ object.

{
   "compilerOptions": {
      "target": "es6",
   }
}

Additionally, users can add 'ES6' in the 'lib' attribute below.

{
   "compilerOptions": {
      "lib": [
         "es6",
         "dom"
      ],
   }
}

However, users can also use subsequent versions of ECMAScript because they support native Promise in TypeScript. For example, es7, es10, etc.

In TypeScript, native promises refer to promises created using the Promise() constructor in TypeScript code. However, we can resolve promises returned from any API request.

These promises can have the following three states.

• pending - This means the commitment has not yet been completed.

• Completed - This means that the promise completed successfully without any errors.

• Rejected - This means the promise completed with an error.

grammar

Users can use native Promise in TypeScript according to the following syntax.

const promise = new Promise((resolve, reject) => {
   
   // resolve or reject the promise
});
promise
.then(() => {
   
   // show results
})
.catch(() => {
   
   // show error
});

In the above syntax, we create a promise using the Promise() constructor and handle the result and error in the then() and catch() blocks respectively. In addition, 'T' represents the return type when the promise completes successfully.

Example 1 (Basic Commitment)

In the following example, we will learn to basically use ES6 native Promise in TypeScript. We created two Promises named first_promise and second_promise. We've resolved first_promise and rejected second_promise.

In addition, users can see that the return type of the promise is a string. When the first promise resolves successfully, execution control goes to the then() block; when the second promise is rejected, execution control goes to the catch() block.

// resolving a promise
const first_promise = new Promise((res, rej) => {
   res("First promise resolved");
});
first_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

// rejecting a promise
const second_promise = new Promise((res, rej) => {
   rej("Second promise rejected");
});
second_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

When compiled, it will generate the following JavaScript code.

// resolving a promise
var first_promise = new Promise(function (res, rej) {
   res("First promise resolved");
});
first_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) { 
   console.log(err);
});

// rejecting a promise
var second_promise = new Promise(function (res, rej) {
   rej("Second promise rejected");
});
second_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

Example 2 (Nested Promises)

In the following example, we demonstrate how to use nested promises. We created outer_promise using the new keyword and the Promise() constructor. Inside outer_promise's callback function, we create a new sub-promise and resolve the sub-promise.

In the output, the user can observe that the outer_promise is successfully resolved as a sub-promise. If we reject the sub-promise, the outer_promise will also be rejected.

// resolving a promise
const outer_promise = new Promise((res) => {
   res(
      new Promise((resChild) => {
         resChild("Child Promise Resolved");
      })
   );
});
outer_promise
.then((result: string) => {
      console.log(result);
})
.catch((err) => {
   console.log(err);
}); 

When compiled, it will generate the following JavaScript code.

// resolving a promise
var outer_promise = new Promise(function (res) {
   res(new Promise(function (resChild) {
      resChild("Child Promise Resolved");
   }));
});
outer_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

Example 3 (Chained Promises)

The Chinese translation is:

Example 3 (Chained Promise)

In the example below, we show chined promises in TypeScript. As its name suggests, it is a series of promises. Here, when we resolve numeric_promise, we return numeric value.

We got 10 as the result inside the then() block. After that, we multiply the result by 2 and return it. We can get the value returned from the first then() block inside the second then() block, and so on. If any error occurs, control goes directly to the catch() block.

In the output, the user can observe that the result value in each then() block is doubled.

// resolving a promise
const numeric_promise = new Promise((res) => {
   res(10);
});
numeric_promise
.then((result: number) => {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the fourth then() block is - " + result);
})
.catch((err) => {
   console.log(err);
}); 

After compilation, the following JavaScript code will be generated. Resolve a promise

var numeric_promise = new Promise(function (res) {
   res(10);
});
numeric_promise
.then(function (result) {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the fourth then() block is - " + result);
})["catch"](function (err) {
   console.log(err);
}); 

Users learned to use ES6 native promises in TypeScript. We also learned to use nested promises and promise chaining. Typically, users will receive promises as responses from APIs and need to use then() and catch() blocks to handle them.

The above is the detailed content of How to use Typescript with native ES6 Promise?. For more information, please follow other related articles on the PHP Chinese website!