How to use Typescript with native ES6 Promises

javascript typescript es6-promise

133,854

Solution 1

The current lib.d.ts doesn't have promises in it defined so you need a extra definition file for it that is why you are getting compilation errors.

You could for example use (like @elclanrs says) use the es6-promise package with the definition file from DefinitelyTyped: es6-promise definition

You can then use it like this:

var p = new Promise<string>((resolve, reject) => { 
    resolve('a string'); 
});

edit You can use it without a definition when targeting ES6 (with the TypeScript compiler) - Note you still require the Promise to exists in the runtime ofcourse (so it won't work in old browsers :)) Add/Edit the following to your tsconfig.json :

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

edit 2 When TypeScript 2.0 will come out things will change a bit (though above still works) but definition files can be installed directly with npm like below:

npm install --save @types/es6-promise - source

edit3 Updating answer with more info for using the types.

Create a package.json file with only { } as the content (if you don't have a package.json already. Call npm install --save @types/es6-promise and tsc --init. The first npm install command will change your package.json to include the es6-promise as a dependency. tsc --init will create a tsconfig.json file for you.

You can now use the promise in your typescript file var x: Promise<any>;. Execute tsc -p . to compile your project. You should have no errors.

Solution 2

Alternative #1

Use the target and lib compiler options to compile directly to es5 without needing to install the es6-shim. (Tested with TypeScript 2.1.4). In the lib section, use either es2016 or es2015.promise.

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "es2015.promise",
            "dom"
        ]
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Alternative #2

Use NPM to install the es6-shim from the types organization.

npm install @types/es6-shim --save-dev

Alternative #3

Before TypeScript 2.0, use typings to install the es6-shim globally from DefinitelyTyped.

npm install typings --global --save-dev
typings install dt~es6-shim --global --save-dev

The typings option uses npm to install typings globally and then uses typings to install the shim. The dt~ prefix means to download the shim from DefinitelyTyped. The --global option means that the shim's types will be available throughout the project.

dchang about 3 years

I'm a complete beginner to Typescript and am wondering if it's possible to use ES6 promises in Typescript and what I would have to do to get them to work. I'm running node 0.11.14 and am getting an error during compilation "Cannot find name 'Promise'"
dchang over 9 years

many thanks Dick van den Brink! up and running after a tsd query es6-promise --action install --save
Lolo. over 8 years

I've use your code in angular2 and there is an error: async_1.Promise is not a function. BTW I use typescript.
diegohb over 8 years

note that Typescript v1.7.x defines es6 promise definition file at C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\lib.e‌s6.d.ts
Adrian Ber over 8 years

You cannot actually use commonjs and es6 together.
Plantain Yao over 8 years

@AdrianBer Actually you can, things changed. github.com/Microsoft/TypeScript/wiki/…
Admin about 8 years

this won't work if you plan to support IE. You'll get 'syntax error' in the browser when running it.
Dick van den Brink almost 8 years

Typings already exists for quite some time now but TypeScript 2.0 will allow installing definition files directly from npm (so you don't need an additional tool like typings). Updated my post with information when TypeScript 2.0 will become available.
Shaun Luttin almost 8 years

We're receiving the following error: Attempted to compile "es6-promise" as a global module, but it looks like an external module. You'll need to remove the global option to continue.
HMR over 7 years

Using that type file typescript still errors on window.Promise. I'm trying to implement a polyfil for Promise using jQuery (for IE 10). but window.Promise = window.Promise || ... causes an error in typescript even with the definition ///<reference path="./typings/es6-promise.d.ts" /> My target output is es5 but can use native promise if needed since the polyfill does the same.
Kokodoko over 7 years

After installing @types/es6-promise with npm, how do you include it in the .ts project? Adding it to package.json does not automatically include it in the compilation process.
Dick van den Brink over 7 years

@Kokodoko, I updated my answer with more detailed steps; does that help you?
Kokodoko over 7 years

Erm... but how do you include the .d.ts file in the project :) Do you need a ///ref tag or do you add it to tsconfig.json ? Also, do you need to include the index.d.ts file, or can you just include @types/es6-promise?
Dick van den Brink over 7 years

You don't need to include it, it happens automatically because it will pickup the package.json and notice it has 'typings' for the promise package. Are you seeing otherwise? (e.g. does the above steps don't work for you?)
rumblefx0 over 7 years

I think I have the same issue as @Kokodoko - my package.json got updated after the first statement, but its not being picked up by Intellisense (I'm using VS), it transpiles and runs though so seems like a VS Intellisense issue... Any ideas on this? I already tried restoring/installing packages, but didn't make a difference.
zakdances over 7 years

I'm using "target": "es6" with TypeScript 2.1.1 and I'm still getting Cannot find name 'Promise'.
Ash Blue over 7 years

I ran --save @types/es6-promise and have my type roots setup correctly in tsconfig.json. But es6-promise refuses to be included still.
m-r-r over 7 years

Hello. I think the flag --save-dev should be used instead of --save, as the library is only used at compile time.
Berty over 7 years

now the most recent way is: npm install @type/es6-promise --save
Ethan about 7 years

This is the best answer, I think. It doesn't require changing your compile target or bringing in all the es2015 typings.
paldepind about 7 years

This is outdated. You don't have to set target to ES6 nor install a typings file. See my answer below.
paldepind about 7 years

This is no longer the most recent way. TypeScript ships with types for Promises out of the box. There is no need to install anything. See my answer.
paldepind about 7 years

Including es2016 is not a good idea unless your target supports ES2016. There is a lot of browsers that supports promises but not everything in ES2016. Use es2015.promise to include just the types for promises without pulling in types for everything in ES2016.
Dick van den Brink over 6 years

This is an option when you only support new browsers. If you require IE10 or older android devices support you still need a polyfill.
Halil İbrahim Oymacı over 3 years

In addition, I should add this line to top of the code: import {Promise} from 'es6-promise'. If it is not added, this error occurs: 'Promise' only refers to a type, but is being used as a value here.
Wiston Coronell about 3 years

How does this resolve the problem? Please elaborate your answer.
gav_aus_web about 2 years

Don't forget to "Reload Window" in VsCode after updating this.