Usando sintaxe de propagação e new Set () com texto digitado

Estou usando o seguinte código para obter números exclusivos:

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

No entanto, o texto digitado relata o seguinte erro: O tipo 'Set' não é um tipo de matriz. Não sou um ninja datilografado, alguém poderia me dizer o que há de errado aqui?

Este é um recurso ausente. No momento, o TypeScript só oferece suporte a iteráveis ​​em Arrays.

Atualização : Com o Typescript 2.3, agora você pode adicionar "downlevelIteration": trueao seu tsconfig, e isso funcionará ao direcionar o ES5.

A desvantagem downlevelIterationdisso é que o TS terá que injetar um pouco de boilerplate ao transpilar. A única linha da pergunta transpila com 21 linhas de texto padrão adicionado: (a partir do 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);

Este clichê será injetado uma vez por arquivo que usa iteração de nível inferior, e esse clichê pode ser reduzido usando a "importHelpers"opção por meio do tsconfig. (Veja esta postagem do blog sobre iteração de nível inferior e importHelpers)

Alternativamente, se o suporte ES5 não importa para você, você pode sempre direcionar apenas "es6" em primeiro lugar, caso em que o código original funciona sem precisar do sinalizador "downlevelIteration".

Resposta original:

Esta parece ser uma peculiaridade de transpilação ES6 datilografada. O ...operador deve trabalhar em qualquer coisa que tenha uma propriedade iteradora, (Acessado por obj[Symbol.iterator]) e Conjuntos a tenham.

Para contornar esse problema, você pode usar Array.frompara converter o conjunto para uma matriz em primeiro lugar: ...Array.from(new Set([1, 2, 3, 1, 1])).

Você também pode usar o método Array.from para converter o conjunto em Array

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

Você precisa definir "target": "es6",em seu tsconfig.

Em Javascript:

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

No texto datilografado:

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

Em estado de reação (setState):

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

Para fazê-lo funcionar, você precisa de "target": "ES6" (ou superior) ou "downlevelIteration": true em compilerOptions de seu tsconfig.json. Isso resolveu meu problema e está funcionando bem ou para mim. Espero que ajude você também.