답변.

질문의 역사:

Spread(...)와 Rest(...)는 ES6에서 온 가장 인기 있는 현대 구문 구조 중 하나입니다. TypeScript에서는 유형의 엄격함을 얻게 되어, Spread와 Rest의 사용이 편리할 뿐만 아니라, 유형 제한을 올바르게 준수한다면 안전해졌습니다.

문제:

Spread 및 Rest 작업은 값의 유형을 고려하지 않거나 호환되지 않는 유형을 혼합할 경우 오류의 원인이 됩니다(예: 호환되지 않는 속성을 가진 객체 또는 서로 다른 유형의 배열을 결합할 때).

해결책:

TypeScript에서 Spread는 객체의 속성이나 배열의 요소를 복사하거나 결합하는 데 사용됩니다. Rest는 함수나 배열에서 "잔여" 요소를 수집할 수 있게 해주며, 엄격한 유형 검사가 호환되지 않는 경우를 확인하여 컴파일 단계에서 오류를 방지합니다.

코드 예시:

// 객체에서의 Spread
const base = { a: 1, b: 2 };
const extended = { ...base, c: 3 };
// extended: { a: number; b: number; c: number }

// 함수 매개변수에서의 Rest
function sum(...args: number[]): number {
  return args.reduce((acc, val) => acc + val, 0);
}

// 배열에서의 Spread
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

주요 특징:

Spread는 유형의 호환성을 확인하면서 속성/요소를 복사합니다.
Rest는 잔여 매개변수의 엄격한 유형을 보장합니다.
잘못된 결합에 의한 유형 오류는 컴파일 단계에서 포착됩니다.

함정 질문.

Spread를 사용한 객체 복사와 참조 할당의 차이점은 무엇인가요?

Spread는 나열된 모든 속성의 복사본을 가진 새 객체를 생성하지만, 객체에 중첩된 객체가 있는 경우 그들은 참조로 복사됩니다(얕은 복사).

const base = { a: 1, nested: { x: 2 } };
const copy = { ...base };
copy.nested.x = 42;
console.log(base.nested.x); // 42

Spread를 사용하여 특정 속성만 복사할 수 있나요?

아니요, Spread는 객체의 모든 나열된 속성을 복사합니다. 특정 속성을 선택하려면 구조 분해 할당을 사용해야 합니다:

const { a, ...rest } = { a: 1, b: 2, c: 3 };
// rest: { b: 2, c: 3 }

Spread를 사용하여 동일한 속성을 가진 두 객체를 결합하면 어떻게 되나요? 이것이 유형화에 어떤 영향을 미치나요?

마지막 객체의 속성이 이전 속성을 덮어씁니다. 이때 마지막 속성의 유형이 최종적으로 간주됩니다:

const a = { val: 1 };
const b = { val: 'hello' };
const merged = { ...a, ...b };
// merged: { val: string } (가 아니라 number)

유형 오류 및 안티 패턴

깊은 복제를 위해 Spread를 사용하지 마십시오. 이는 단지 "얕은 복사"입니다.
잘못된 rest 매개변수 유형 지정(any[] 대신 구체적인 유형 지정)
속성이 겹치는 호환되지 않는 유형의 객체를 결합합니다.

실생활의 예

부정적인 사례

프로젝트에서 Spread를 통해 구성 매개변수를 결합하기로 결정했습니다. 하나의 객체에는 timeout: number 속성이 있었고, 다른 객체에는 timeout: string 속성이 있었습니다. 이때 너무 늦어 컴파일 단계에서는 오류가 없었지만, 런타임에서 잘못된 유형으로 인해 함수가 중단되었습니다.

장점:

몇 줄의 코드로 신속하게 구현됨

단점:

명시적으로 유형을 설정하면 유형 오류가 눈에 띄지 않음: any.
속성 충돌 시의 문제점.

긍정적인 사례

엄격한 인터페이스를 결합하기 위해 유형화된 Spread를 사용했으며, 필요 없는 필드를 분리하기 위해 구조 분해 할당을 사용했습니다. 컴파일러는 즉시 오류를 확인했습니다.