How to use Typescript with native ES6 Promises ?

What is TypeScript?
TypeScript is a free and open-source programming language developed and maintained by Microsoft. It 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.

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

val.then(value => {
  console.log('resolved', value);
});
  
val.catch(error => {
  console.log('rejected', error);
});

chevron_right


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.

full-stack-img

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.