프론트엔드/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",
}