[코드캠프 벨류업]TS Generic

민범기·2022년 5월 2일
0
post-custom-banner

우선 제네릭이 무슨 뜻인지 알아야 한다.
제네릭은 흔히 자바스크립트에서는 쓰이지 않는다.
자바스크립트를 제외한 다른 언어에서는 함수 또는 클래스에서 사용할 타입을 유동적으로 지정해 주는것을 말한다. 즉 특정 타입을 사용할 것이지만 그 타입을 유동적으로 지정할 수 있는 방법이다.

// 다양한 타입의 데이터를 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;
}

출처:https://www.morolog.dev/entry/Typescript-%EC%A0%9C%EB%84%A4%EB%A6%ADGeneric%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

위의 코드를 본다면 제네릭을 interface 에서 T 로 선언해 주었다.
즉 저 부분은 제네릭 타입이며 타입을 쓰긴 쓸것이지만 유동적으로 타입이 바뀐다는 뜻이다.
즉 제일 상단에 PaginationList에 타입을 사용할것 이지만 items에 들어오는 배열 값은 다를수 있기 때문에 제네릭을 사용해서 동적으로 타입을 변환 시키는 것을 확인 할 수 있다.
정말 좋은 문법인것 같다..

profile
프론트엔드 개발 지망생 민범기입니다^^
post-custom-banner

0개의 댓글