Javascript 在打字稿中使用扩展语法和 new Set()

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33464504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 15:05:25  来源:igfitidea点击:

Using spread syntax and new Set() with typescript

javascripttypescriptecmascript-6spread-syntax

提问by Eggy

I am using following code to get unique numbers:

我正在使用以下代码来获取唯一编号:

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

However, typescript report following error: Type 'Set' is not an array type.I am not typescript ninja, could someone tell me what is wrong here?

但是,打字稿报告以下错误:Type 'Set' is not an array type。我不是打字稿忍者,有人能告诉我这里有什么问题吗?

采纳答案by basarat

This is a missing feature. TypeScript only supports iterables on Arrays at the moment.

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

回答by Retsam

Update: With Typescript 2.3, you can now add "downlevelIteration": trueto your tsconfig, and this will work while targeting ES5.

更新:使用 Typescript 2.3,您现在可以添加"downlevelIteration": true到您的 tsconfig 中,这将在面向 ES5 时起作用。

The downside of downlevelIterationis that TS will have to inject quite a bit of boilerplate when transpiling. The single line from the question transpiles with 21 lines of added boilerplate: (as of Typescript 2.6.1)

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

This boilerplate will be injected once per file that uses downlevel iteration, and this boilerplate can be reduced using the "importHelpers"option via the tsconfig. (See this blogposton downlevel iteration and importHelpers)

这个样板将在每个使用下级迭代的文件中注入一次,并且可以"importHelpers"通过 tsconfig使用选项减少这个样板。(请参阅有关下层迭代的博客文章和importHelpers

Alternatively, if ES5 support doesn't matter for you, you can always just target "es6" in the first place, in which case the original code works without needing the "downlevelIteration" flag.

或者,如果 ES5 支持对您来说无关紧要,您始终可以首先定位“es6”,在这种情况下,原始代码无需“downlevelIteration”标志即可工作。



Original answer:

原答案:

This seems to be a typescript ES6 transpilation quirk . The ...operator should work on anything that has an iterator property, (Accessed by obj[Symbol.iterator]) and Sets have that property.

这似乎是一个打字稿 ES6 转译的怪癖。该...经营者应在任何有一个iterator属性(由工作访问的obj[Symbol.iterator]),并设置有属性。

To work around this, you can use Array.fromto convert the set to an array first: ...Array.from(new Set([1, 2, 3, 1, 1])).

要解决这一点,你可以使用Array.from所设置的一个数组先转换:...Array.from(new Set([1, 2, 3, 1, 1]))

回答by Nate Getch

You can also use Array.from method to convert the Set to Array

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

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

回答by phil294

You need to set "target": "es6",in your tsconfig.

您需要"target": "es6",在 tsconfig.xml 中进行设置。

回答by Mayur Saner

To make it work, you either need "target": "ES6" (or higher) or "downlevelIteration": true in the compilerOptions of your tsconfig.json . This resolved my issue and working good or me.Hope it will help you also.

要使其工作,您需要在 tsconfig.json 的 compilerOptions 中使用 "target": "ES6"(或更高版本)或 "downlevelIteration": true。这解决了我的问题并且工作良好或我。希望它也能帮助你。