[Typescript] 제네릭(Generic)을 사용하는 이유

일단 나는 제네릭이라는 용어 자체를 몰랐다. 제너레이터랑 헷갈렸을 정도니까.

꺾쇠, 타입 키워드를 듣고도, 아. Array<String> 말하는건가? 그거 그냥 string[]과 동일한 문법의 한 종류 아닌가? 생각했다.

IDE에서 알려주는 정보 모달에서 <T>라고 되어있는 것도 그냥 여기에 타입을 넣으세요~ 라는 의미인줄 알았는데...

제네릭을 진작 알았다면, 타입 정의의 새로운 세계가 열렸을텐데 참 아쉽다.

 

제네릭은 함수나 클래스에서 사용할 타입을 외부에서 유동적으로 지정해줄 수 있는 것을 말한다.

특정 타입을 사용할 것이지만, 그 타입을 유동적으로 지정할 수 있다.

 

예를들면 아래와 같이 사용할 수 있다.

리스폰스에 페이지네이션 정보와 함께 데이터 배열을 보내는 경우는 흔히 있다.

이때 totalItem, currentPage등은 공통적으로 사용될 수 있을 것이다.

그런 경우, <T>를 사용하여 유동적인 타입을 받을 수 있다.

// 다양한 타입의 데이터를 items 배열에 담아 페이지네이션 정보와 함께 정의하는 타입
interface PaginationList<T> {
  totalItem: number;
  currentPage: number;
  noOfPageItems: number;
  noOfPages: number;
  items: Array<T>;
}

// 게시글
interface Post {
  userId: number;
  contents: string;
}

// 댓글
interface Reply {
  postId: number;
  comment: string;
}

// 특정 유저의 글 리스트를 페이지네이션 정보와 함께 가져오는 함수
function getPosts (userId: number) {
  let result: PaginationList<Post>;
  // ...
  return result;
}

// 특정 글의 댓글 리스트를 페이지네이션 정보와 함께 가져오는 함수
function getReplies (postId: number) {
  let result: PaginationList<Reply>;
  // ...
  return result;
}

 

만약 제네릭을 사용할 수 없다면?

// 게시글용 페이지네이션 리스트
interface PostPaginationList {
  totalItem: number;
  currentPage: number;
  noOfPageItems: number;
  noOfPages: number;
  items: Post[];
}

// 댓글용 페이지네이션 리스트
interface ReplyPaginationList {
  totalItem: number;
  currentPage: number;
  noOfPageItems: number;
  noOfPages: number;
  items: Reply[];
}

// ... 각 모델마다 페이지네이션 리스트 정의가 추가로 필요해진다.