[javascript] typescript와 함께 스프레드 구문 및 new Set () 사용

Question 1

고유 번호를 얻기 위해 다음 코드를 사용하고 있습니다.

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

그러나 typescript는 다음 오류를보고합니다. ‘Set’유형은 배열 유형이 아닙니다.
나는 타이프 스크립트 닌자가 아닙니다. 누군가 여기서 무엇이 잘못되었는지 말해 줄 수 있습니까?

Question 2

이것은 누락 된 기능입니다. TypeScript는 현재 배열에서 이터 러블 만 지원합니다.

Question 3

업데이트 : Typescript 2.3을 사용하면 이제 "downlevelIteration": truetsconfig에 추가 할 수 있으며 ES5를 대상으로하는 동안 작동합니다.

단점은 downlevelIterationTS가 트랜스 파일 할 때 꽤 많은 상용구를 삽입해야한다는 것입니다. 질문의 한 줄은 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);

스 니펫 확장

이 상용구는 다운 레벨 반복을 사용하는 파일 당 한 번씩 주입 "importHelpers"되며 tsconfig를 통해 옵션을 사용하여이 상용구를 줄일 수 있습니다 . ( 하위 수준 반복 및 ) 에 대한 이 블로그 게시물 을 참조하십시오.importHelpers

또는 ES5 지원이 중요하지 않은 경우 항상 처음에 “es6″을 대상으로 지정할 수 있습니다.이 경우 원래 코드가 “downlevelIteration”플래그없이 작동합니다.

원래 답변 :

이것은 typescript ES6 transpilation 특이한 것 같습니다. ...운영자는 반복자 속성 (액세스를 가지고 어떤 작업을해야한다 obj[Symbol.iterator])과 설정은 그 속성이 있습니다.

이 문제를 해결하려면 Array.from먼저 세트를 배열로 변환하는 데 사용할 수 있습니다 ...Array.from(new Set([1, 2, 3, 1, 1]))..

Question 4

Array.from 메서드를 사용하여 Set를 Array로 변환 할 수도 있습니다.

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

스 니펫 확장

Question 5

"target": "es6",tsconfig에서 설정해야합니다 .

Question 6

작동하려면 tsconfig.json의 compilerOptions에서 “target”: “ES6″(또는 그 이상) 또는 “downlevelIteration”: true가 필요합니다. 이것은 내 문제를 해결하고 잘 작동하며 당신에게도 도움이되기를 바랍니다.

Question 7

자바 스크립트에서 :

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

Typescript에서 :

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

반응 상태 (setState)에서 :

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