타입스크립트 제네릭(Generic)

제네릭이란?
Generic: 통상적인, 일반적인 라는 뜻을 가졌고,
타입스크립트에서 Generic은 재사용 가능한 컴포넌트를 생성할 때 사용되며, 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다.

Generic을 특징

• 다양한 타입을 받을 수 있기 때문에, 유연하다
• 컴파일 시에 타입 안정성을 보장한다.
• 재사용 가능하다.

제네릭 함수 (Generic Funtion)

function PrintItems<T>(args: T): T {
    console.log(args);
    return args;
}

const numberArray = [1,2,3,4,5];
const textArray = ["오늘", "즐거운 하루", "보내세요"];
const bool = true;
const text = "오늘도 공부중입니다";
const myInfoObj = {
    name: "taenami",
    age: 29
}

PrintItems(numberArray); // [1,2,3,4,5]
PrintItems(textArray); // ["오늘", "즐거운 하루", "보내세요"]
PrintItems(bool); // true
PrintItems(text); // 오늘도 공부중입니다
PrintItems(myInfoObj); // {name: "taenami", age: 29}

T는 제네릭을 선언할 때 관용적으로 사용되는 식별자로 타입 파라미터(Type parameter)라 한다

PrintItems 함수는 인수의 타입에 의해 타입 매개변수가 결정된다.

제네릭 클래스 (Generic Classes)

interface Value<L,R> {
    callLeft: () => L;
    callright: () => R;
}

class Diary<L,R> implements Value<L,R> {
    constructor(private feeling: L, private shortWords: R){}

    callLeft(): L {
        console.log(this.feeling);
        return this.feeling
    }

    callright(): R {
        console.log(this.shortWords);
        return this.shortWords
    }
}

const yesterdayDiary: Value<string, string> = new Diary("나빠요", "몸이 아프네요");
console.log(yesterdayDiary);

const todayDiary = new Diary({"좋은 정도": 10}, "로또 맞았어요");
console.log(todayDiary);

생성자를 호출하여 객체를 만들 때 T로 사용될 타입을 명시해주는 방법을 사용해도 되고,

생성자 호출시, 바로 값을 할당해줘도 된다.

제네릭 제약조건 (Generic Constraints)

interface Info {
    feeling: string
}

function call<T extends Info>(today: T): T {
    console.log(today.feeling);
    return today;
}

call({feeling: "good"});
call("good"); //undefined

문자열 타입의 인수는 Info 타입의 매개변수에 할당할 수 없다는 오류가 뜬다.

Info 인터페이스를 확장하였기 때문에, 정의된 인터페이스와 일치해야만 한다.

 

any를 이용하여 구현하면 저장하고 있는 자료의 타입이 모두 같지 않다는 문제점이 생기는데, 이를 사용하면 굳이 타입스크립트를 사용하는 의미가 없다고 생각한다.

이때는 Generic을 고려해서 사용해야 한다.