Korzystanie ze składni rozkładania i nowego Set () z maszynopisem

Używam następującego kodu, aby uzyskać unikalne numery:

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

Jednak maszynopis zgłasza następujący błąd: Typ „Set” nie jest typem tablicy. Nie jestem ninja maszynopisu, czy ktoś mógłby mi powiedzieć, co tu jest nie tak?

To jest brakująca funkcja. W tej chwili TypeScript obsługuje tylko iteracje w tablicach.

Aktualizacja : dzięki Typescript 2.3 możesz teraz dodać "downlevelIteration": truedo swojego tsconfig, co będzie działać podczas kierowania na ES5.

Wadą tego downlevelIterationjest to, że TS będzie musiał wprowadzić sporo gotowej płyty podczas transpilacji. Pojedyncza linia z pytania przenosi się z 21 liniami dodanego schematu: (jak w 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);

Ten standardowy szablon zostanie wprowadzony raz na plik, który używa iteracji niższego poziomu, a ten szablon można zmniejszyć za pomocą "importHelpers"opcji za pośrednictwem tsconfig. (Zobacz ten post na blogu o iteracji niższej wersji iimportHelpers )

Alternatywnie, jeśli obsługa ES5 nie ma dla ciebie znaczenia, zawsze możesz najpierw skierować na "es6", w którym to przypadku oryginalny kod działa bez konieczności używania flagi "downlevelIteration".

Oryginalna odpowiedź:

To wydaje się być dziwactwem transpilacji w maszynopisie ES6. ...Operator powinien działać na cokolwiek, co ma właściwość iteracyjnej, (dostęp przez obj[Symbol.iterator]) oraz zestawy posiadają tę właściwość.

Aby obejść ten problem, można użyć Array.fromdo konwersji zestawu do tablicy pierwszy: ...Array.from(new Set([1, 2, 3, 1, 1])).

Możesz również użyć metody Array.from, aby przekonwertować zestaw na Array

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

Musisz ustawić "target": "es6",w swoim pliku tsconfig.

Aby to zadziałało, potrzebujesz „target”: „ES6” (lub nowszego) lub „downlevelIteration”: true w opcji compilerOptions twojego tsconfig.json. To rozwiązało mój problem i działa dobrze lub dla mnie. Mam nadzieję, że to również pomoże.

W JavaScript:

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

W maszynie:

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

W stanie reakcji (setState):

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