Utilisation de la syntaxe de diffusion et du nouveau Set () avec dactylographié

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

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

Toutefois, dactylographié signale l'erreur suivante: Le type «Set» n'est pas un type de tableau. Je ne suis pas un ninja dactylographié, quelqu'un pourrait-il me dire ce qui ne va pas ici?

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

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

L'inconvénient downlevelIterationest que TS devra injecter un peu de passe-partout lors du transpilage. La seule ligne de la question transpile avec 21 lignes de passe-partout ajouté: (à 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 une itération de bas niveau, et ce passe-partout peut être réduit en utilisant l' "importHelpers"option via le tsconfig. (Voir cet article de blog sur l'itération de bas niveau et importHelpers)

Sinon, si la prise en charge d'ES5 n'a pas d'importance pour vous, vous pouvez toujours cibler simplement "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 dactylographiée ES6. L' ...opérateur doit travailler sur tout ce qui a une propriété d'itérateur, (Accès par obj[Symbol.iterator]) et les ensembles ont cette propriété.

Pour contourner ce problème, vous pouvez utiliser Array.frompour convertir d' abord le jeu à un tableau: ...Array.from(new Set([1, 2, 3, 1, 1])).

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);

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

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 fonctionne bien ou moi. J'espère que cela vous aidera également.

En Javascript:

[ ...new Set([1, 2, 3, 1, 1]) ]

En texte manuscrit:

Array.from(new Set([1, 2, 3, 1, 1]))

Dans l'état de réaction (setState):

setCart(Array.from(new Set([...cart, {title: 'Sample', price: 20}])));