reduce()와 타입스크립트, 왜 타입 에러가 날까?
자바스크립트의 reduce()는 배열을 순회하며 하나의 결과값을 만들어내는 유용한 메서드입니다. 하지만 타입스크립트에서는 reduce()의 초기값(initialValue)에 타입을 명시하지 않으면 에러가 발생합니다.
예를 들어, 빈 배열([])을 초기값으로 주면 타입스크립트는 이 배열이 어떤 요소를 가질지 알 수 없어 타입 관련 에러를 뿜어냅니다.
// ❌ 타입 에러 발생!
const list = array.reduce((acc, item) => {
acc.push({ key: item.attributeKey, value: item.attributeValue });
return acc;
}, []);위 코드는 acc(누적값)에 어떤 타입의 객체가 담길지 타입스크립트가 알 수 없기 때문에 에러를 냅니다. 이를 해결하는 방법은 크게 두 가지가 있습니다.
해결 방법 1: 제네릭(Generic) 사용하기
가장 권장되는 방법은 reduce() 메서드에 제네릭(Generic)을 사용하여 반환될 값의 타입을 명시적으로 지정하는 것입니다.
interface IReduce {
key: string;
value: string;
}
// ✅ 제네릭으로 타입 지정
const list = array.reduce<IReduce[]>((acc, item) => {
acc.push({ key: item.attributeKey, value: item.attributeValue });
return acc;
}, []); // 초기값은 []reduce<IReduce[]>()와 같이 제네릭으로 IReduce 객체 배열을 반환할 것이라고 미리 알려주면, 타입스크립트는 acc를 IReduce[] 타입으로 인식하여 타입 에러를 해결해 줍니다. 이 방법은 코드를 더 안전하고 명확하게 만들어줍니다.
해결 방법 2: as 단언 사용하기
만약 제네릭 사용이 번거롭게 느껴진다면, 초기값에 as 단언을 사용해 타입을 강제로 지정해 줄 수도 있습니다.
interface IReduce {
key: string;
value: string;
}
const list = array.reduce((acc, item) => {
acc.push({ key: item.attributeKey, value: item.attributeValue });
return acc;
}, [] as IReduce[]); // ✅ as 단언으로 타입 지정[] as IReduce[]는 "빈 배열이지만, IReduce[] 타입으로 간주해줘" 라고 타입스크립트에게 알려주는 역할을 합니다. 코드가 더 간결해 보일 수 있지만, 단언은 타입스크립트의 타입 추론을 무시하는 것이므로 꼭 필요한 경우에만 신중하게 사용하는 것이 좋습니다.
Frontend Engineer