在打字稿中使用传播语法和 new Set()
Using spread syntax and new Set() with typescript
我正在使用以下代码获取唯一编号:
let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3]
然而,打字稿报告以下错误:Type 'Set' is not an array type.
我不是打字忍者,有人能告诉我这里有什么问题吗?
更新:使用 Typescript 2.3,您现在可以将 "downlevelIteration": true
添加到您的 tsconfig,这将在针对 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);
每个使用下层迭代的文件都会注入一次该样板文件,并且可以通过 tsconfig 使用 "importHelpers"
选项减少该样板文件。 (参见下层迭代的 this blogpost 和 importHelpers
)
或者,如果 ES5 支持对您来说无关紧要,您始终可以首先将 "es6" 作为目标,在这种情况下,原始代码无需 "downlevelIteration" 标志即可运行。
原回答:
这似乎是一个打字稿 ES6 转译怪癖。 ...
运算符应该适用于任何具有迭代器 属性(由 obj[Symbol.iterator]
访问)并且集合具有 属性.
的任何东西
要解决此问题,您可以先使用 Array.from
将集合转换为数组:...Array.from(new Set([1, 2, 3, 1, 1]))
.
这是一项缺失的功能。 TypeScript 目前仅支持数组上的迭代。
您需要在 tsconfig 中设置 "target": "es6",
。
你也可以使用Array.from方法将Set转为Array
let uniques = Array.from(new Set([1, 2, 3, 1, 1])) ;
console.log(uniques);
要让它工作,您需要 "target": "ES6"(或更高)或 "downlevelIteration": true 在您的 tsconfig.json 的 compilerOptions 中。
这解决了我的问题并且工作正常或者 me.Hope 它也会帮助你。
在Javascript中:
[ ...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}])));
现在,您可以在 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'. */
},
...
}
我正在使用以下代码获取唯一编号:
let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3]
然而,打字稿报告以下错误:Type 'Set' is not an array type. 我不是打字忍者,有人能告诉我这里有什么问题吗?
更新:使用 Typescript 2.3,您现在可以将 "downlevelIteration": true
添加到您的 tsconfig,这将在针对 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);
每个使用下层迭代的文件都会注入一次该样板文件,并且可以通过 tsconfig 使用 "importHelpers"
选项减少该样板文件。 (参见下层迭代的 this blogpost 和 importHelpers
)
或者,如果 ES5 支持对您来说无关紧要,您始终可以首先将 "es6" 作为目标,在这种情况下,原始代码无需 "downlevelIteration" 标志即可运行。
原回答:
这似乎是一个打字稿 ES6 转译怪癖。 ...
运算符应该适用于任何具有迭代器 属性(由 obj[Symbol.iterator]
访问)并且集合具有 属性.
要解决此问题,您可以先使用 Array.from
将集合转换为数组:...Array.from(new Set([1, 2, 3, 1, 1]))
.
这是一项缺失的功能。 TypeScript 目前仅支持数组上的迭代。
您需要在 tsconfig 中设置 "target": "es6",
。
你也可以使用Array.from方法将Set转为Array
let uniques = Array.from(new Set([1, 2, 3, 1, 1])) ;
console.log(uniques);
要让它工作,您需要 "target": "ES6"(或更高)或 "downlevelIteration": true 在您的 tsconfig.json 的 compilerOptions 中。 这解决了我的问题并且工作正常或者 me.Hope 它也会帮助你。
在Javascript中:
[ ...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}])));
现在,您可以在 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'. */
},
...
}