Verwenden der Spread-Syntax und des neuen Set () mit Typoskript

Ich verwende folgenden Code, um eindeutige Nummern zu erhalten:

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

Typoskript meldet jedoch folgenden Fehler: Typ 'Set' ist kein Array-Typ. Ich bin kein Typoskript-Ninja. Kann mir jemand sagen, was hier falsch ist?

Dies ist eine fehlende Funktion. TypeScript unterstützt derzeit nur iterables auf Arrays.

Update : Mit Typescript 2.3 können Sie jetzt "downlevelIteration": truezu Ihrer tsconfig hinzufügen. Dies funktioniert beim Targeting von ES5.

Der Nachteil downlevelIterationist, dass TS beim Transpilieren ziemlich viel Boilerplate einspritzen muss. Die einzelne Zeile aus der Frage wird mit 21 Zeilen hinzugefügter Boilerplate transpiliert: (ab 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);

Diese Boilerplate wird einmal pro Datei injiziert, die eine Downlevel-Iteration verwendet, und diese Boilerplate kann mithilfe der "importHelpers"Option über die tsconfig reduziert werden . (Siehe diesen Blogpost zur Downlevel-Iteration und importHelpers)

Wenn die ES5-Unterstützung für Sie keine Rolle spielt, können Sie alternativ immer zuerst "es6" als Ziel festlegen. In diesem Fall funktioniert der ursprüngliche Code, ohne das Flag "downlevelIteration" zu benötigen.

Ursprüngliche Antwort:

Dies scheint eine maschinengeschriebene ES6-Transpilations-Eigenart zu sein. Der ...Operator sollte an allem arbeiten, was eine Iterator-Eigenschaft hat (Zugriff durch obj[Symbol.iterator]), und Sets haben diese Eigenschaft.

Um dies zu umgehen, können Sie Array.fromden Satz zuerst in ein Array konvertieren : ...Array.from(new Set([1, 2, 3, 1, 1])).

Sie können auch die Array.from-Methode verwenden, um das Set in Array zu konvertieren

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

Sie müssen "target": "es6",in Ihrer tsconfig einstellen.

Damit es funktioniert, benötigen Sie entweder "target": "ES6" (oder höher) oder "downlevelIteration": true in den compilerOptions Ihrer tsconfig.json. Dies hat mein Problem gelöst und funktioniert gut oder ich. Ich hoffe, es wird Ihnen auch helfen.

In Javascript:

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

Im Typoskript:

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

Im Reaktionszustand (setState):

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