2week_FE_tech_post_1

타입스크립트 제네릭이란?

제네릭을 처음 마주친 순간

타입스크립트로 작성된 코드를 보다보면 함수명<T>(a: T) {...}과 같이 작성된 코드가 종종 보인다. 이번 프로젝트를 진행하면서 타입스크립트를 처음 쓰다 보니 무슨 뜻인지도 모르고 안 써도 코드를 작성할 수 있어서 우선은 무시한 채로 계속해서 코드를 작성해 나갔다. 그러다 API를 통해서 데이터를 fetch하는 함수를 작성하려고 자료를 찾다보니 다시 한 번 마주치게 되었다.

제네릭을 포함한 아주 간단한 예시

function sort<T>(item: T[]): T[] {
  return item.sort();
}

const nums: number[] = [1, 2, 3, 4];

sort<number>(nums);

위의 sort함수는 배열을 받아서 해당 배열을 정렬하는 간단한 함수이다. sort<T>에서 <T>가 제네릭 타입이다. 즉 sort함수를 사용할 때 타입도 <T>로 받아오게 된다. sort<number>(nums);라면 이번에 호출된 sort함수에서 T는 number가 된다. 즉 함수는 다음과 같이 생각할 수 있다.

function sort(item: number[]): number[] {
    return item.sort();
}

즉 number배열을 입력으로 받아 number배열을 출력하는 함수가 되는 것이다. 물론 함수를 작성할 때 처음부터 any[]을 사용해도 된다. 하지만 any를 사용하면 타입스크립트에서 컴파일 시 타입을 확인해 주지 않는다. 하지만 제네릭 타입을 사용하면 컴파일러가 타입을 확인해 오류를 잡아줄 수 있다.

실제 useFetch함수에서의 사용

type FetchStatus = 'idle' | 'loading' | 'success' | 'error';

interface FetchResponse<T> {
  data: T | null;
  error: string | null;
  status: FetchStatus;
}

const useFetch = <T>(url: string): FetchResponse<T> => {
  const [data, setData] = useState<T | null>(null);

  ...

  return {data};
}

위는 프로젝트에서 사용하는 useFetch라는 커스텀 훅의 일부 코드이다. useFetch는 제네릭 타입으로 타입 <T>로 받고 문자열 url을 파라미터로 받아서 FetchResponse<T>라는 타입을 return하는 함수이다. interface FetchResponse<T>는 또한 객체형태로 data: T | null;을 통해서 객체에서 data의 value로는 T타입의 값 또는 null만 가질 수 있도록 해주었다.

따라서 우리가 useFetch를 사용할 때는 제네릭 타입으로 원하는 타입을 넘겨주면 해당 타입을 가지고 결과를 return해주는 형태로 동작한다. 아래와 같이 사용해서 API에서 넘겨주는 데이터를 바탕으로 interface를 선언해주고 해당 interface를 useFetch의 제네릭 타입으로 념겨주면 데이터의 타입을 반영해서 안전하게 받을 수 있게 된다.

interface IProps {
  name: string;
  age: number;
  major: string[];
}

const { data } = useFetch<IProps>('API 주소');

console.log(data.name);
console.log(data.age);

추가적인 제네릭의 사용법 - extends

function getLen<T>(data: T) {
  return data.lenght;
}

의미없는 함수이지만 위와같이 어떠한 데이터의 length를 구하는 함수를 작성한다고 하였을 때 위와 같이 작성하면 오류가 발생할 수 있다. 예를 들어 함수의 파라미터로 들어온 data라는 값에 length라는 속성이 없을 수 있기 때문이다. 따라서 getLen이라는 함수를 수행할 때 미리 length라는 속성이 있는지 확인하기 위해 필요한 것이 extends이다.

interface lengthCheck {
  length: number;
}

function getLen<T extends lengthCheck>(data: T) {
  return data.lenght;
}

위와 같이 코드를 작성하면 제네릭 T타입은 반드시 lengthCheck라는 interface를 포함한다는 뜻이다. 즉 T extends lengthCheck라는 타입은 반드시 lenght라는 속성을 가지고 있기 때문에 return data.length;이 가능하다.