타입스크립트의 제네릭 이해하기

 

제네릭은 TypeScript에서 코드의 유연성을 높이고 코드 재사용성을 향상시키는 데 사용된다.

이해를 위해 제네릭을 "왜", "어디에", "어떻게" 사용하는지 알아보자.

왜 제네릭을 사용하는가?

• 유연성: 제네릭을 사용하면 함수, 클래스 또는 인터페이스를 특정 유형에 종속되지 않도록 만들 수 있다. 이는 여러 유형의 데이터를 처리할 수 있게 해준다.
• 코드의 재사용성 향상 : 동일한 코드를 다양한 유형의 데이터에 적용할 수 있다. => 코드의 재사용성 향상
• 재사용 가능한 컴포넌트 : 현재의 데이터와 미래의 데이터 모두를 다룰 수 있는 컴포넌트를 생성할 수 있다 => 시스템 구성에 있어 유연성 제공

=> 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있다. 

 

+ any가 아닌 제네릭을 사용하는 이유?

any를 쓰는 것은 함수의 arg가 어떤 타입이든 받을 수 있다는 점에서 제네릭이지만, 실제로 함수가 반환할 때 어떤 타입인지에 대한 정보는 잃게 된다. 만약 number 타입을 넘긴다고 해도 any 타입이 반환된다.

어디에 제네릭을 사용하는가?

• 함수: 함수의 매개변수나 반환값의 유형을 제네릭으로 지정하여 유형에 종속되지 않은 함수를 작성할 수 있다.
• 클래스: 클래스 내부에서 사용되는 유형을 제네릭으로 선언하여 클래스를 일반화할 수 있다.
• 인터페이스: 인터페이스를 정의할 때도 제네릭을 사용하여 다양한 유형의 데이터를 지원할 수 있다.

어떻게 제네릭을 사용하는가?

• 제네릭 타입 매개변수를 함수의 이름 뒤에 <T>와 같이 선언하고, 이를 함수의 매개변수나 반환값 유형에 적용한다.
• 타입변수 T는 유저가 준 인수의 타입을 캡처하고 (예 - number), 이 정보를 나중에 사용할 수 있게 한다.

// 제네릭을 사용하지 않는 경우
function printArray(arr: number[]): void {
    arr.forEach(element => {
        console.log(element);
    });
}

const numbers: number[] = [1, 2, 3, 4, 5];
printArray(numbers);

// 제네릭을 사용하는 경우
function printArrayGeneric<T>(arr: T[]): void {
    arr.forEach(element => {
        console.log(element);
    });
}

const strings: string[] = ["apple", "banana", "orange"];
printArrayGeneric(strings);

 

두 번째 함수 printArrayGeneric은 제네릭을 사용하여 어떤 유형의 배열이든 처리할 수 있다. 이렇게 함으로써 코드의 재사용성과 유연성을 향상 시킬 수 있다.