TypeScript 제네릭 타입 에러 확인하는 순서

TypeScript의 제네릭을 사용하면 유연한 타입을 작성할 수 있지만, 제네릭 타입이 충돌할 때는 에러 메시지가 매우 복잡할 수 있다. 운영 중에 이런 에러를 마주하면 빨리 분리해서 봐야 한다.

타입 에러 메시지 읽기

TypeScript의 제네릭 에러는 보통 매우 길다. 하지만 핵심은 보통 "Expected ... but got ..." 형태로 나타난다. 에러 메시지의 마지막 부분부터 거슬러 올라가며 읽으면 어느 부분이 맞지 않는지 알 수 있다.

구체적으로 타입 확인하기

먼저 빌드를 시도해보자.

npm run build
npx tsc --noEmit

빌드 에러가 발생하면 정확히 어느 줄에서 실패하는지, 어떤 제네릭 타입이 맞지 않는지 확인한다. 한 번에 여러 에러가 떠도 첫 번째 에러부터 차근차근 해결하자.

제네릭 인자를 구체적으로 명시하기

제네릭이 자동으로 추론되지 않을 때는 명시적으로 타입을 지정해보자.

// 추론 실패
const result = someGenericFunction(data);

// 명시적 지정
const result = someGenericFunction<MyType>(data);

이렇게 하면 TypeScript가 정확히 어느 부분이 타입 불일치인지 지적한다.

검증 순서

1. 빌드 에러의 정확한 위치 파악 — 어떤 파일의 몇 줄인가
2. 해당 함수의 제네릭 정의 확인 — 기대하는 타입이 무엇인가
3. 전달하는 인자의 실제 타입 확인 — 로그나 타입 호버로 확인
4. **optional이나 union 타입 처리 — null 체크나 타입 가드가 필요한가
5. 명시적 타입 지정으로 재확인 — 에러가 해결되는가

작은 확인을 반복하면 제네릭의 복잡한 에러도 단계적으로 해결할 수 있다.