본문 바로가기
프론트엔드/TypeScript

제네릭

by alswlfl 2023. 1. 3.

제네릭(Generic)

  • 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 가능
  • 선언 할 때는 타입 파라미터만 작성하고, 생성하는 시점에 사용하는 타입 결정
function getSize(arr:number[] | string[]):number{
  return arr.length;
}

const arr1=[1,2,3];
getSize(arr1);

const arr2=["a","b","c"];
getSize(arr2);
//매개변수의 타입만 바꾸고 동일한 함수를 사용하고 싶으면, 함수 오버로드 또는 유니온 타입 사용하기
//계속 타입이 눌어나는 경우 제네릭 사용
//<T>사용: T는 어떤 타입을 전달받아서 해당 함수에서 사용 할 수 있도록 함
function getSize2<T>(arr:T[]):number{
  return arr.length;
}

const arr3=[1,2,3];
getSize2<number>(arr3);

const arr4=["a","b","c"];
getSize2<string>(arr4);

const arr5=[false,true, true];
getSize2<boolean>(arr5);

인터페이스에서 제네릭 사용하기

interface Mobile<T>{
  name: string;
  price:number;
  option: T;
}

const m1:Mobile<{color: string; coupon:boolean}> = {
  name:"s21",
  price:1000,
  option:{
    color: "red",
    coupon:false,
  }
}
const m2:Mobile<string> = {
  name:"s2",
  price:900,
  option:"good",
}

'프론트엔드 > TypeScript' 카테고리의 다른 글

클래스  (0) 2023.01.03
리터럴, 유니온/교차 타입  (0) 2023.01.03
함수  (0) 2023.01.03
인터페이스  (0) 2023.01.03
TypeScript 사용 이유와 기본 타입  (0) 2023.01.03