Open In App

How to use Typescript with native ES6 Promises ?

Last Updated : 25 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.




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


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.


Similar Reads

How to use Native JavaScript Promises in Postman ?
Postman is a popular tool used by developers for testing APIs. While Postman primarily offers a graphical user interface (GUI) for making HTTP requests, it also supports scripting capabilities using JavaScript. One common use case for scripting in Postman is making asynchronous requests and handling responses using promises. We will discuss the dif
3 min read
ES6 Promises
Promises are a way to implement asynchronous programming in JavaScript(ES6 which is also known as ECMAScript-6). A Promise acts as a container for future values. Like if you order any food from any site to deliver it to your place that order record will be the promise and the food will be the value of that promise. So the order details are the cont
4 min read
What are the states of promises in ES6 ?
In this article, we will discuss the basic details associated with the promises followed by various states of promises in ES6. Let us first understand some basic details which are associated with promises. Promises: A Promise is an object which is used to handle all the asynchronous operations (which are obviously executed on asynchronous data comi
3 min read
What is the use of Promises in JavaScript ?
Promises in JavaScript are a way to handle asynchronous operations. They have three states: pending, fulfilled, and rejected. You create a promise using the Promise constructor, and it resolves with a value or rejects with an error. Promises are consumed .then() for success and .catch() for errors. They support chaining for sequential operations an
1 min read
Should we use TypeScript with React Native ?
React Native is used to creating apps for Both Android and iOS platforms. It allows you to use a single codebase for both platforms. One of the biggest advantages React Native provides is that it's easy to learn because you don't need to learn a whole new programming language for it. Because it uses well-known javascript under the hood. So develope
8 min read
Difference between ES6 and TypeScript
1. ECMAScript 6 (ES6) : ES6 is also known as ECMAScript 2015 as it is released in 2015. Its class allows the developers to instantiate an object using the new operator, using an arrow function, in case it doesn’t need to use the keyword function to define the function, also return keyword can be avoided to fetch the computer value. 2. TypeScript :
2 min read
Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Approach: In this ar
2 min read
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic
2 min read
How to add a Progress Bar in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Approach: In this a
3 min read
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read