web-dev-qa-db-ja.com

タイプスクリプトでのスプレッド構文と新しいSet（）の使用

次のコードを使用して一意の番号を取得しています。

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

ただし、TypeScriptは次のエラーを報告します。Type 'Set'は配列型ではありません。 TypeScript忍者ではありません。

javascripttypescriptecmascript-6spread-syntax
64
Eggy

これは欠落している機能です。 TypeScriptは、現時点では配列のイテラブルのみをサポートしています。

29
basarat

Update：TypeScript 2.3では、tsconfigに_"downlevelIteration": true_を追加できるようになりました。これはES5をターゲットにしているときに機能します。

downlevelIterationの欠点は、TSがトランスパイルするときにかなりの定型文を挿入する必要があることです。質問からの単一行は、追加の定型句が21行追加されています（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);_

このボイラープレートは、ダウンレベルの反復を使用するファイルごとに1回挿入され、このボイラープレートは、tsconfigを介して_"importHelpers"_オプションを使用して削減できます。 （ このブログ投稿 ダウンレベルの反復とimportHelpersを参照）

あるいは、ES5のサポートが重要でない場合は、最初から常に「es6」をターゲットにすることができます。この場合、元のコードは「downlevelIteration」フラグを必要とせずに機能します。

元の答え：

これはTypeScript ES6のトランスパイレーションの癖のようです。 _..._演算子は、イテレータプロパティ（_obj[Symbol.iterator]_によってアクセスされる）を持ち、Setsがそのプロパティを持っているものすべてに対して機能する必要があります。

これを回避するには、_Array.from_を使用して、最初にセットを配列に変換します：...Array.from(new Set([1, 2, 3, 1, 1]))。

61
Retsam

Array.fromメソッドを使用してSetをArrayに変換することもできます

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

Tsconfigで"target": "es6",を設定する必要があります。

6
Blauhirn

動作させるには、tsconfig.jsonのcompilerOptionsで "target"： "ES6"（またはそれ以上）または "downlevelIteration"：trueが必要です。これで私の問題は解決し、うまく機能しました。あなたにも役立つことを願っています。

0
Mayur Saner