使用扩展语法和带有typescript的新Set()

时间:2015-11-01 16:38:20

标签: javascript typescript ecmascript-6 spread-syntax

我使用以下代码来获取唯一数字:

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

但是,typescript报告跟随错误:类型'Set'不是数组类型。 我不是打字稿忍者,有人能告诉我这里有什么问题吗?

7 个答案:

答案 0 :(得分:49)

更新:使用Typescript 2.3,您现在可以将"downlevelIteration": true添加到您的tsconfig中,这将在定位ES5时有效。

downlevelIteration的缺点是TS在转换时必须注入相当多的样板。来自问题的单行转换为21行添加的样板:(从类型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);
&#13;
&#13;
&#13;

每个使用下层迭代的文件将为此样板注入一次,并且可以通过tsconfig使用"importHelpers"选项减少此样板。 (请参阅关于下层迭代的this blogpostimportHelpers

或者,如果ES5支持对您不重要,您可以始终只针对&#34; es6&#34;首先,在这种情况下,原始代码无需&#34; downlevelIteration&#34;旗。

原始回答:

这似乎是一个打字稿ES6翻译的怪癖。 ...运算符应该处理具有迭代器属性的任何内容(由obj[Symbol.iterator]访问)并且Sets具有该属性。

要解决此问题,您可以先使用Array.from将设置转换为数组:...Array.from(new Set([1, 2, 3, 1, 1]))

答案 1 :(得分:30)

您也可以使用Array.from方法将Set转换为Array

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

答案 2 :(得分:26)

这是一项缺失的功能。 TypeScript目前仅支持Arrays上的迭代。

答案 3 :(得分:4)

您需要在tsconfig中设置"target": "es6",

答案 4 :(得分:0)

要使其运行,您需要在tsconfig.json的editorOptions中使用“ target”:“ ES6”(或更高版本)或“ downlevelIteration”:true。 这解决了我的问题,对我或我都有利。希望它也对您有所帮助。

答案 5 :(得分:0)

在Java语言中:

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

在打字稿中:

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

处于React状态(setState):

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

答案 6 :(得分:0)

现在,您可以在 Typescript 设置中使用 Set(无需定位 es6):

在您的 tsconfig.json 中,添加以下行:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    
    "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    
  },
  ...
}