How to use Typescript with native ES6 Promises ?

What is TypeScript?
TypeScript is a free as well as an open-source programming language which was developed and is maintained by Microsoft. It actually provides highly productive development tools for JavaScript IDEs and also for practices like static checking. It even makes code easier to read and understand. We can make huge improvements over plain JavaScript using TypeScript. For making the code in somehow more documented form, TypeScript is preferred which in itself has a feature of adding data type (or return type) in the code which provides any user a better readability.

ES6 and TypeScript: ES6 is a version of ECMAScript (ES), which is a scripting language specification standardized by ECMA international. TypeScript gives us all benefits of ES6 with much productivity. TypeScript supports asynchronous functions for machines that have native ES6 generators. In this way, TypeScript allows the usage of promises that are from native ES6.

We can use TypeScript with native ES6 promises in the following ways:

1. The first way is by adding the following lines of code in the tsconfig.json file as shown below:

   "compilerOptions": {
       "lib": ["es5", "es2015.promise"]
   }
   

   This will include the compatibility of native ES6 promises without setting the target to ES6.

2. Another way to do the same is to add the following lines of code in the tsconfig.json file as shown below:

   "compilerOptions": {
       "target": "ES6"
   }
   

   While using the above code, the Promise should exist in the runtime for sure.

3. There is also one more effective way to use Typescript with native ES6 promises. The following steps include:
   • Step 1: Create package.json file with { }.
   • Step 2: Call npm install –save @types/es6-promise. This will change package.json to include ES6-promise as a dependency.
   • Step 3: Then, call tsc –init. This command creates the tfconfig.json file for us.
   • Step 4: Now, we can use promise in typescript file using var x: Promise;
   • Step 5: Execute tsc -p to compile the project or program you created.

All the above methods tend to work in all browsers. By these, we can use TypeScript with native ES6 promises.

Example to demonstrate where promises are used in TypeScript in async/await.

Let’s see how promises are used in the TypeScript function. For that, a simple promise is created below. Here, the promise is said to have the generic type of strings and basically performs two operations, resolve or reject.

const val = new Promise((resolve, reject) => {});

Our promise can be resolved or rejected which is carried out by the following piece of code which is known to be the callback.

Here, the .then part carries out the resolve execution whereas .catch takes care of the rejection part. If the promise is resolved, then the callbacks are executed. Otherwise, the catch callbacks are executed.

To resolve a promise, use the following code:

resolve("Hello");

Output:

 resolved 'Hello'

Rejecting a promise must be done only in exceptional cases. It is not recommended to reject a promise using a raw string. Instead, it is good to use an error constructor when rejecting a promise.

Rejecting a promise is done by the following code:

reject(new Error('failed'));

Output:

rejected 'failed'

Like this, the ES6 promises are used along with TypeScript to make the execution of callbacks easier and faster just by using resolve/reject.