TypeScript 제네릭 타입 체크 에러가 나올 때

TypeScript 제네릭 타입 에러는 정말 복잡하고 길다. 에러 메시지만 봐서는 실제 원인을 찾기 어려울 때가 많다. 체계적으로 접근해야 한다.

빌드 에러 메시지 꼼꼼히 읽기

TypeScript 컴파일 에러는 여러 줄에 걸쳐 나타난다. 가장 먼저 보는 줄은 에러가 발생한 파일과 줄 번호다. 거기부터 시작해서 아래로 쭉 읽어내려가야 한다.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

빌드를 실행할 때 제네릭 타입 에러가 나타나면, 에러 메시지의 "Expected" 부분과 "Received" 부분을 비교해서 어느 부분이 안 맞는지 본다.

제네릭 함수의 타입 인자 확인

제네릭 함수를 호출할 때 타입 인자를 명시해야 하는 경우가 있다. 특히 TypeScript가 자동으로 타입을 추론하지 못할 때는 직접 써야 한다.

// 명시적으로 타입을 지정
const result = processData<string>(myData);

제네릭 제약 확인

제네릭에 extends 키워드로 제약을 둔 경우, 전달하는 타입이 정말 그 제약을 만족하는지 확인한다.

function getData<T extends { id: string }>(obj: T) {
  // T는 반드시 id 프로퍼티를 가져야 한다
}

이 함수를 호출할 때 id 프로퍼티가 없는 객체를 넘기면 에러가 난다.

타입 정의 파일 확인

metadata나 타입 정의 파일(.d.ts)이 제대로 생성됐는지 확인한다. 라이브러리를 사용할 때 타입 정의가 빠져 있으면 제네릭이 제대로 작동하지 않을 수 있다.

정상 상태 정의하기

TypeScript 타입 에러를 해결할 때는 먼저 "이 함수가 받아야 할 타입이 정확히 뭔가"를 명확히 해야 한다. 그 다음에 넘기는 쪽과 받는 쪽의 타입이 일치하는지 확인한다.

비정상 상황 감지

TypeScript 에러가 나타나는 순간:

1. 에러 메시지를 전체적으로 읽는다.
2. "Expected" 타입이 뭔지 확인한다.
3. 실제로 넘기고 있는 타입이 뭔지 본다.
4. 그 사이의 불일치를 찾는다.

최종 확인

제네릭 타입을 수정한 후:

1. 다시 빌드해서 에러가 없는지 확인한다.
2. 실제 함수 호출도 올바르게 작동하는지 테스트한다.
3. 타입 추론이 제대로 되는지 IDE의 인텔리센스로 확인한다.

복잡한 제네릭 타입 에러도 작은 부분씩 나누면 충분히 해결할 수 있다.