使用typescript，结合spread语法和new Set()方法的技巧。

Question

使用typescript，结合spread语法和new Set()方法的技巧。

javascripttypescriptecmascript-6spread-syntax

150

我正在使用以下代码获取唯一数字：

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

然而，TypeScript 报告了如下错误：Type 'Set' is not an array type. 我不是 TypeScript 的专家，有没有人能告诉我这里出了什么问题？

- Eggy

4

如果你使用的版本声称支持ES2015，我认为这只是一个Typescript的bug。 - Pointy

1

@Pointy 很抱歉，我应该包含 tsc 的版本号，它是 1.6.2。 - Eggy

7个回答

131

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

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

- Nate Getch

把数组展开再重新捕获到一个新的数组中有什么意义呢？ - Robby Cornelissen

1

如果无法使用“es6”作为目标，在tsconfig中进行设置。并且需要使用具有扩展运算符的Set，你该如何做？ - Nate Getch

4

如果你使用Array.from()，就不再需要使用扩展运算符。扩展运算符只会增加额外负担。例如：let uniques = Array.from(new Set([1, 2, 3, 1, 1])); - Robby Cornelissen

2

@RobbyCornelissen 上述代码的整个目的是创建一个由原始数组唯一值组成的数组。 - Reza

61

这是一个缺失的功能。目前，TypeScript仅支持数组上的可迭代对象。

- basarat

感谢澄清。我将使用.filter()或其他方法来完成工作。我还在GitHub上发现了一些关于这个特定错误的问题。我会在未来的版本中密切关注它。 - Eggy

42

在Javascript中：

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

在 TypeScript 中：

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

在 React 中的 State（状态）（setState）中：

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

- Najathi

21

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

- phil294

12

现在，您可以在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'. */
    
  },
  ...
}

- Shivam Jha

4

为了使其工作，您需要在tsconfig.json的compilerOptions中设置"target": "ES6"（或更高版本）或"downlevelIteration": true。这解决了我的问题并且正常运行。希望这也能帮助您。

- Mayur Saner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Retsam · Accepted Answer

更新: 在Typescript 2.3中，您现在可以将"downlevelIteration": true添加到您的tsconfig中，并且在针对ES5时它将起作用。
downlevelIteration的缺点是，在进行转译时，TS将不得不注入相当多的样板文件。截至Typescript 2.6.1，问题的单行转译带有21行添加的样板文件。

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);

这个样板将在使用下级迭代的每个文件中注入一次，并且可以通过tsconfig选项中的"importHelpers"来减少这个样板（参见this blogpost关于下级迭代和importHelpers的说明）。

另外，如果您不需要ES5支持，您可以直接以"es6"为目标，这种情况下原始代码不需要"downlevelIteration"标志也可以工作。

原始答案：

这似乎是TypeScript ES6转换的一个怪癖。 ... 操作符应该适用于具有迭代器属性的任何内容（通过 obj [Symbol.iterator] 访问），并且集合具有该属性。

要解决此问题，您可以使用 Array.from 将集合先转换为数组：...Array.from(new Set([1, 2, 3, 1, 1]))。