[TypeScript] 제네릭(Generic) 타입은 무엇인가?

Generic -  타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다.

코드 재사용 측면에서 아주 유용.

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

const arr1 = [1,2,3];
getSize(arr1);
const arr2 = ["a", "b", "c"];
getSize(arr2);
const arr3 = [true, false, false]; 
getSize(arr3);
const arr4 = [{},{},{name: 'Tony'}]
getSize(arr4);

유니언 타입을 사용해서 늘릴 수 있지만, 효율 저하

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

const arr1 = [1,2,3];
getSize<number>(arr1); // 마우스를 올리면 T부분이 모두 넘버로 사용됐음을 알림.
const arr2 = ["a", "b", "c"];
getSize<string>(arr2); // <>부분을 개입해주지 않고도, TS는 전달되는 매개변수를 보고, 어떤 타입인지 알 수 있습니다. 
const arr3 = [true, false, false]; 
getSize<boolean | string>(arr3); //특정 타입으로 강제하고 싶은 경우에만.
const arr4 = [{},{},{name: 'Tony'}]
getSize(arr4);

T : Type parameter, T를 일반적으로 사용, A, X 등 사용해도 무방; 어떤 타입을 전달 받아서 이 함수에서 사용할 수 있도록 함.

 

interface에서 사용 및 활용

interface Mobile {
    name: string;
    price: number;
    option: any; // 현재 any에는 어떤 타입이 들어올지 모르는 상황. 
}

// 제네릭 활용.
interface Mobile<T> {
    name: string;
    price: number;
    option: T; 
}

const m1: Mobile<object> = {      // 혹은 <{color: string; coupon:number}>
    name: 'iPhone21',
    price: 1000,
    option: {
        color: 'red',
        coupon: false,
    }
}

const m2: Mobile<string> = {    // 객체 m2는 option의 타입이 string이기에, <string>적용.
    name: 'iPhone20',
    price: 900,
    option: 'good'
}

interface에서 활용2

interface User {
    name: string;
    age: number;
}
interface Car {
    name: string;
    color: string;
}
interface Book {
    price: number;
}
const user : User = { name:'Tony', age: 28 };
const car: Car = {name: 'bmw', color: 'blue'};
const book: Book = {price: 3000};

function showName<T extends {name: string}>(data: T): string {      // 모든 타입에 name 이 있을 수 있다고 전달할 수 없기에, 
    return data.name;                                           // extends {name: string} 사용하여 확장, 어떤 T 타입이 오고, 그 T는 name: string인 타입을 확장한 형태이다.
}
showName(user);
showName(car);
showName(book);  // name 이 없거나, string이 아니면, book 을 전달할 때 처럼 에러 발생.