Comment utiliser Typescript avec des promesses ES6 natives

121

Je suis un débutant complet de Typescript et je me demande s'il est possible d'utiliser les promesses ES6 dans Typescript et ce que je devrais faire pour les faire fonctionner. J'exécute le nœud 0.11.14 et j'obtiens une erreur lors de la compilation "Impossible de trouver le nom 'Promise'"

dchang
la source
1
Les promesses ne sont pas encore dans Node, vous avez besoin d'un package, essayezes6-promise
elclanrs

Réponses:

128

La lib.d.ts actuelle n'a pas de promesses définies, vous avez donc besoin d'un fichier de définition supplémentaire, c'est pourquoi vous obtenez des erreurs de compilation.

Vous pouvez par exemple utiliser (comme @elclanrs le dit) utiliser le package es6-promise avec le fichier de définition de DefinitelyTyped: définition es6-promise

Vous pouvez ensuite l'utiliser comme ceci:

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

modifier Vous pouvez l'utiliser sans définition lorsque vous ciblez ES6 (avec le compilateur TypeScript) - Notez que vous avez toujours besoin que la promesse existe dans le runtime bien sûr (donc cela ne fonctionnera pas dans les anciens navigateurs :)) Ajoutez / modifiez ce qui suit à votre tsconfig.json:

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

edit 2 Lorsque TypeScript 2.0 sortira, les choses changeront un peu (bien que ci-dessus fonctionne toujours) mais les fichiers de définition peuvent être installés directement avec npm comme ci-dessous:

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

edit3 Mise à jour de la réponse avec plus d'informations sur l'utilisation des types.

Créez un package.jsonfichier avec uniquement { }comme contenu (si vous n'avez pas encore de package.json. Appelez npm install --save @types/es6-promiseet tsc --init. La première commande d'installation npm changera votre package.jsonpour inclure l'es6-promise en tant que dépendance. Tsc --init créera un tsconfig.jsonfichier pour vous.

Vous pouvez maintenant utiliser la promesse dans votre fichier dactylographié var x: Promise<any>;. Exécutez tsc -p .pour compiler votre projet. Vous ne devriez avoir aucune erreur.

Dick van den Brink
la source
5
merci beaucoup Dick van den Brink! opérationnel après une requête tsd es6-promise --action install --save
dchang
3
notez que Typescript v1.7.x définit le fichier de définition de promesse es6 dans C: \ Program Files (x86) \ Microsoft Visual Studio 12.0 \ Common7 \ IDE \ CommonExtensions \ Microsoft \ TypeScript \ lib.es6.d.ts
diegohb
2
Je pense que j'ai le même problème que @Kokodoko - mon package.json a été mis à jour après la première déclaration, mais il n'est pas repris par Intellisense (j'utilise VS), il se transpile et s'exécute donc semble être un problème VS Intellisense ... Des idées à ce sujet? J'ai déjà essayé de restaurer / installer des paquets, mais je n'ai pas fait de différence.
rumblefx0
2
Bonjour. Je pense que le drapeau --save-devdevrait être utilisé à la place de --save, car la bibliothèque n'est utilisée qu'au moment de la compilation.
mrr
2
C'est obsolète. Vous n'avez pas besoin de définir la cible sur ES6 ni d'installer un fichier de typages. Voir ma réponse ci-dessous.
paldepind
50

Alternative n ° 1

Utilisez les options du compilateur targetet libpour compiler directement es5sans avoir à installer le es6-shim. (Testé avec TypeScript 2.1.4). Dans la section lib, utilisez soit es2016ou es2015.promise.

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

Alternative n ° 2

Utilisez NPM pour installer l' organisation àes6-shim partir des types .

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

Alternative n ° 3

Avant TypeScript 2.0, utilisez des typages pour installer es6-shimglobalement à partir de DefinitelyTyped .

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

L' typingsoption utilise npmpour installer typingsglobalement, puis utilise typingspour installer le shim. Le dt~préfixe signifie télécharger le shim à partir de DefinitelyTyped. le--global option signifie que les types de cales seront disponibles tout au long du projet.

Voir également

https://github.com/Microsoft/TypeScript/issues/7788 - Impossible de trouver le nom 'Promise' & Impossible de trouver le nom 'require'

Shaun Luttin
la source
2
L'inclusion es2016n'est pas une bonne idée à moins que votre cible ne prenne en charge ES2016. Il y a beaucoup de navigateurs qui prennent en charge les promesses mais pas tout dans ES2016. Utilisez es2015.promisepour inclure uniquement les types pour les promesses sans extraire les types pour tout dans ES2016.
paldepind
23

À partir de TypeScript 2.0, vous pouvez inclure des typages pour les promesses natives en incluant les éléments suivants dans votre tsconfig.json

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

Cela inclura les déclarations de promesse fournies avec TypeScript sans avoir à définir la cible sur ES6.

paldepind
la source
3
C'est la meilleure réponse, je pense. Il ne nécessite pas de changer votre cible de compilation ou d'intégrer tous les typages es2015.
Ethan
C'est une option lorsque vous ne prenez en charge que les nouveaux navigateurs. Si vous avez besoin de la prise en charge des appareils Android IE10 ou plus anciens, vous avez toujours besoin d'un polyfill.
Dick van den Brink
13

Si vous utilisez node.js 0.12 ou supérieur / typescript 1.4 ou supérieur, ajoutez simplement des options de compilation comme:

tsc a.ts --target es6 --module commonjs

Plus d'informations: https://github.com/Microsoft/TypeScript/wiki/Compiler-Options

Si vous utilisez tsconfig.json, alors comme ceci:

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

Plus d'informations: https://github.com/Microsoft/TypeScript/wiki/tsconfig.json

Plantain Yao
la source
Vous ne pouvez pas réellement utiliser commonjs et es6 ensemble.
Adrian Ber le
3
@AdrianBer En fait, vous pouvez, les choses ont changé. github.com/Microsoft/TypeScript/wiki/…
Plantain Yao
cela ne fonctionnera pas si vous prévoyez de prendre en charge IE. Vous obtiendrez une «erreur de syntaxe» dans le navigateur lors de son exécution.
RoninCoder
12

C'est la façon la plus récente de le faire, la réponse ci-dessus est obsolète:

typings install --global es6-promise

Nick Kenens
la source
Les typages existent déjà depuis un certain temps maintenant mais TypeScript 2.0 permettra d'installer des fichiers de définition directement à partir de npm (vous n'avez donc pas besoin d'un outil supplémentaire comme les typages). Mise à jour de mon message avec des informations lorsque TypeScript 2.0 sera disponible.
Dick van den Brink
3
Nous recevons l'erreur suivante: Tentative de compilation de «es6-promise» en tant que module global, mais il ressemble à un module externe. Vous devrez supprimer l'option globale pour continuer.
Shaun Luttin le
maintenant le moyen le plus récent est: npm install @ type / es6-promise --save
Berty
Ce n'est plus le moyen le plus récent. TypeScript est livré avec des types de promesses prêts à l'emploi. Il n'est pas nécessaire d'installer quoi que ce soit. Voyez ma réponse.
paldepind
5

Utilisation de promesses ES6 natives avec Typescript dans Visual Studio 2015 + outils Node.js 1.2

Aucune installation npm requise car ES6 Promises est native.

Projet Node.js -> Propriétés -> Onglet Construction Typescript Version ECMAScript = ECMAScript6

import http = require('http');
import fs = require('fs');

function findFolderAsync(directory : string): Promise<string> {

    let p = new Promise<string>(function (resolve, reject) {

        fs.stat(directory, function (err, stats) {

            //Check if error defined and the error code is "not exists"
            if (err && err.code === "ENOENT") {
                reject("Directory does not exist");
            }
            else {
                resolve("Directory exists");
            }
        });

    });
    return p;
}

findFolderAsync("myFolder").then(

    function (msg : string) {
        console.log("Promise resolved as " + msg); 
    },
    function (msg : string) {
        console.log("Promise rejected as " + msg); 
    }
);
Bibek Bhattacharya
la source
5

A. Si vous utilisez une "target": "es5"version de TypeScript inférieure à 2.0:

typings install es6-promise --save --global --source dt

Si vous utilisez "target": "es5"et TypeScript version 2.0 ou supérieure:

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

C. Si vous utilisez "target": "es6", il n'y a rien à faire.

Vaz
la source
4
J'utilise "target": "es6"avec TypeScript 2.1.1 et je reçois toujours Cannot find name 'Promise'.
zakdances
-1

J'ai dû passer @types/core-jsà la version 9.36 pour qu'il fonctionne avec "target": "es5"set dans mon tsconfig.

"@types/core-js": "0.9.36",

James
la source