타입스크립트 - 제네릭(Generics)이란? 장점 사용법

제네릭(Generics) 이란?

타입스크립트에서 제네릭이란

함수, 클래스, 인터페이스를 선언할 때, 타입을 파라미터 화하는 방법을 제네릭 이라고 합니다.

 

타입스크립트의 경우에는 변수, 함수, 클래스 생성 시에 타입을 지정해야 하는데,

타입을 지정하려고 하면 동일한 기능에 함수를 타입별로 만들어줘야 하는 단점이 있습니다.

const arrayName: string[] = ['superman', 'batmam', 'pororo'];
const arrayNumber: number[] = [1, 2, 3];

// generic 방식
const genericName: Array<string> = ['superman', 'batmam', 'pororo'];
const genericNumbers: Array<number> = [1, 2, 3];

위아래 둘다 string 타입의 배열과 number 타입의 배열을 선언하였습니다.

 

첫번째 방식은 string과 number 타입을 선언한 방식이고,

아래 방식은 Array 함수에 제네릭(generic) 타입을 선언한 방식입니다.

generic 
1. [형용사] 포괄적인, 총칭[통칭]의
2. [형용사] 회사 이름이 붙지 않은, 일반 명칭으로 판매되는

제네릭을 이용하면 타입을 지정하지 않고, 파라미터처럼 받을 수 있어서 코드를 재사용할 수 있는 장점이 있습니다.

 

제네릭 사용 예시 1

function getLastElement<Type>(arr: Type[]): Type {
    return arr[arr.length - 1];
}

console.log(getLastElement(['superman', 'batman', 'pororo'])) // pororo
console.log(getLastElement([1, 2, 3])) // 3

getLastElement는 배열에서 마지막 요소를 가져오는 함수 입니다.

 

제네릭을 이용하지 않으면

arr 파라미터의 경우에 Array <string> 타입과 Array <number> 타입 두 가지를 만들어야 하는데,

제네릭을 활용하면 여러 종류의 타입을 받을 수 있도록 유연하게 만들 수 있습니다.

 

제네릭 사용 예시 2

function objMerge<T, U>(objA: T, objB: U): T & U {
    return {...objA, ...objB};
}

const object = objMerge({name: 'superman'}, {age: 30});
console.log(object.age);

두 개 이상의 타입도 받을 수 있습니다.

제네릭 타입을 T, U로 선언하였는데, Type의 앞글자인 T와 그다음 알파벳 숫자인 U를 사용하였습니다.

 

반환값은 T & U로 선언이 되어 있습니다.

그래서 return 된 객체 안에 age가 있다는 것을 예상할 수 있습니다.

 

제네릭 타입을 설정하면 타입 안정성과 결합된 유연성을 제공합니다.

 

다음 포스팅에서는 제네릭 타입에 제약조건을 설정하는 방법에 대해서 알아보도록 하겠습니다.