내가 쓰는 제네릭 타입

제네릭을 왜써요? 라는 질문에
"재사용성을 높이려고 쓰던가 자동완성 쓰려고" 라고 답변을 하고
그 사람에게 설명을 해주다보니,
한번 더 정리를 해서 보여주고 싶은 마음이 생겼다.

 

제네릭은 왜 쓸까? 
 * 함수형 컴포넌트를 많이 사용하고 함수 또한 화살표 함수로 만드는 것을 주로 하기때문에 사용하는 기준에서 설명을 해보겠다.

1. 첫번째 케이스인데 함수를 만들 때에 어떤 하나의 객체 interface에 관련된 타입을 주어줘야 할때이다.

 아래 코드를 보면 간단하게 obj라는 타입에 대해서 어떤 값을 넣었을 때 어떤 타입이 return 되는지를 타입스크립트가 추정할 수 있도록 동작한다.

interface obj {
  name: string;
  age: number;
}
const returnByInputType = <T extends obj, K extends keyof T>(
  obj: T,
  key: K,
) => {
  return obj[key];
};

const kim: obj = {
  name: "kim",
  age: 30,
};
const a = returnByInputType(kim, "name");

2. 두번째 케이스는 비동기 요청에 대한 return 값을 추정하도록 동작하는 타입스크립트에서 다들 사용하는 방식이다.

 아래 코드처럼 단순히 api 요청에 대한 값을 return 시키는 경우에는 아예 getAll 함수에서 반환되는 값을 Promise<posts>로 해도 무관하다. 결론적으로는 비동기 함수에서 return 되는 값의 타입을 제네릭으로 작성하면 개발자 생산성이 대폭 늘 수 있고, 코드 작성간에 타입에러를 잡아내는데에 매우 용이하기 때문에 나는 작성하는 편이다.

type sort = ...
interface posts {
	...
}

export const postAPI = {
  getAll: (sort:sort, page: number) => {
    return instance.get<posts>(`/post/all/${sort}?page=${page}`);
  },
};