TypeScript #6 Generic

제네릭(Generic)은 TypeScript에서 타입 안정성을 유지하면서 재사용성을 높이기 위한 기능입니다.

함수나 클래스를 작성할 때, 그 타입이나 인터페이스를 지정하지 않고 일반화된 형태로 작성할 수 있도록 해줍니다. 이렇게 작성된 함수나 클래스는 나중에 호출되거나 인스턴스화될 때, 타입 인자를 전달하여 구체화할 수 있습니다.

 

//Generic

function getSize(arr: number[] | string[] | boolean[]){
    return arr.length;
}

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

const arr2 = ['a','b','c'];
getSize(arr2); //4

const arr3 = [true, true, false];
getSize(arr3);

const arr4 = [{}, {}, {name:"Tim"}];
getSize(arr4);

 

getSize 함수에 들어 갈 수 있는 매개변수의 타입을 일일히 입력해야하지만 Generic 문법을 이용하면 쉽게 처리가 가능

 

getSize를 Generic 을 이용해서 다음과 같이 변경했다.

function getSize<T>(arr: T[]):number{
    return arr.length;
}

 

getSize() 함수에 들어가는 arr2의 타입이 Generic에 의해 자동으로 정의됨

 

 

Ex1)

interface Mobile<T>{
    name: string;
    price: number;
    option: T; //Option에는 어떤 데이터가 할당 될 지 아직은 알수가 없다. 그래서 Generic을 사용
}

const m1:Mobile<object> = {
    name: "s21",
    price: 1000000,
    option:{
        vendor:"SKT",
        color:"red",
        coupon:false,
    },
};

const m2:Mobile<string> = {
    name:"iphone11",
    price:200000,
    option:"apple",
}

Ex2)

interface Student {
  name: string;
  age: number;
}

interface Person {
  name: string;
  age: number;
}

interface CEO {
  age: number;
}

const student: Student = { name: "a", age: 10 };
const person: Person = { name: "b", age: 11 };
const ceo: CEO = { age: 10 };

function showName<T extends { name: string }>(data: T): string {
  return data.name;
}

console.log(showName(student)); // "a"
console.log(showName(person)); // "b"
console.log(showName(ceo)); // 컴파일 에러: Property 'name' is missing