web-dev-qa-db-fra.com

Utilisation de la syntaxe étalée et du nouveau Set () avec tapuscrit

J'utilise le code suivant pour obtenir des numéros uniques:

let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3]

Cependant, TypeScript signale l'erreur suivante: le type 'Set' n'est pas un type de tableau. Je ne suis pas un ninja TypeScript, quelqu'un pourrait-il me dire ce qui ne va pas ici?

javascripttypescriptecmascript-6spread-syntax
64
Eggy

C'est une fonctionnalité manquante. Pour le moment, TypeScript ne prend en charge que les itérables sur les tableaux.

29
basarat

Mise à jour : Avec TypeScript 2.3, vous pouvez maintenant ajouter "downlevelIteration": true À votre tsconfig, et cela fonctionnera tout en ciblant ES5.

L'inconvénient de downlevelIteration est que TS devra injecter un peu de passe-partout lors du transpilage. La ligne unique de la question transpile avec 21 lignes de passe-partout ajoutées: (à partir de TypeScript 2.6.1)

var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.Push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spread = (this && this.__spread) || function () {
    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
    return ar;
};
var uniques = __spread(new Set([1, 2, 3, 1, 1]));
console.log(uniques);

Ce passe-partout sera injecté une fois par fichier qui utilise l'itération de niveau inférieur, et ce passe-partout peut être réduit à l'aide de l'option "importHelpers" Via tsconfig. (Voir cet article de blog sur l'itération de niveau inférieur et importHelpers)

Alternativement, si la prise en charge d'ES5 n'a pas d'importance pour vous, vous pouvez toujours simplement cibler "es6" en premier lieu, auquel cas le code d'origine fonctionne sans avoir besoin de l'indicateur "downlevelIteration".

Réponse originale:

Cela semble être une bizarrerie de transpilation TypeScript ES6. L'opérateur ... Devrait fonctionner sur tout ce qui a une propriété itérateur, (accessible par obj[Symbol.iterator]) Et les ensembles ont cette propriété.

Pour contourner ce problème, vous pouvez utiliser Array.from Pour convertir d'abord l'ensemble en tableau: ...Array.from(new Set([1, 2, 3, 1, 1])).

61
Retsam

Vous pouvez également utiliser la méthode Array.from pour convertir l'ensemble en tableau

let uniques = Array.from(new Set([1, 2, 3, 1, 1])) ;
console.log(uniques);
36
Nate Getch

Vous devez définir "target": "es6", dans votre tsconfig.

6
Blauhirn

Pour le faire fonctionner, vous avez besoin de "target": "ES6" (ou supérieur) ou "downlevelIteration": true dans les options de compilation de votre tsconfig.json. Cela a résolu mon problème et fonctionnait bien ou moi. J'espère que cela vous aidera également.

0
Mayur Saner