[ Typescript ] 제네릭에 대하여 ( Generic: <> )

제네릭 ( Generic )

제네릭은 C#과 Java와 같은 객체지향 프로그래밍에서 사용하는 기법입니다.

메서드 매개변수의 구체적인 타입을 기재하지 않고 다양한 타입을 처리할 수 있는 기술이며, 잘 사용하면 코드의 재사용성을 높일 수 있습니다.

제네릭은 타입을 엄격하게 관리하는 타입스크립트에서도 사용할 수 있으며, Function, interface, class의 재사용성을 높일 수 있습니다.

 

Generic 기본 문법 적용

function numFunc<T>(arg: T): T {
    console.log(arg);
    return arg;
}
function numFunc2<T>(arg: T) {
    console.log(arg)
}

numFunc<string>("HELLO");
numFunc2<number>(12345);

T는 Type의 약자로 다른 언어에서도 제네릭을 선언할 때 관용적으로 사용됩니다. T는 식별자로 사용할 수 있는 것이라면 무엇이든 들어갈 수 있습니다. _, A 등등도 가능합니다. 하지만 대부분의 경우 T를 사용합니다.

 

function numFunc<string>(arg: string): string {
    console.log(arg);
    return arg;
}
function numFunc2<number>(arg: number) {
    console.log(arg)
}

numFunc<string>("HELLO");
numFunc2<number>(12345);

위 코드처럼 numFunc<string>("HELLO")과 numFunc2<number>(12345)를 호출했을 때 위 코드처럼 정의한 것과 같습니다.

 

 

제네릭을 사용하는 이유

function func(log: string): string {
    return log;
}

func("Hello");

위 코드는 string 인자를 하나 넘겨받아 반환해주는 함수입니다. 여기서 만약에 string 이외에 여러 타입을 허용하고 싶다면 아래처럼 any를 사용할 수 있습니다.

 

function func(log: any): any {
    return log;
}

func("Hello");

타입을 위 코드처럼 바꿔도 함수 동작에 문제가 생기지는 않습니다. 하지만 함수의 인자로 어떤 타입이 들어왔고 어떤 값이 반환되는지 알 수가 없게 됩니다. ( any는 타입 검사를 하지 않기 때문에 보통 javascript를 쓰는것과 같게됩니다. )

이렇게 위 코드의 문제점을 해결할 수 있는 것이 아래의 제네릭입니다.

 

function func<T>(log: T): T {
    return log;
}

func("Hello");

먼저 함수 이름뒤에 <T>를 추가했습니다. 그리고 함수의 인자와 반환 값에 모두 T라는 타입을 추가했습니다. 이렇게 되면 함수를 호출할 때 넘긴 타입에 대해 타입스크립트가 추정할 수 있습니다. 따라서, 함수의 입력값에 대한 타입과 출력 값에 대한 타입이 동일한지 검증할 수 있습니다.

그리고 위처럼 선언한 함수는 아래코드처럼 2가지 방법으로 호출할 수 있습니다.

 

// 1번
const text = func<string>("성공!");

// 2번
const text = func("성공!!");

보통 두 번째 방법이 짧고, 가독성이 좋기 때문에 흔하게 사용됩니다. 하지만 만약 코드에서 두 번째 코드로 타입이 추정되지 않는다면 첫 번째 방법을 사용합니다.

 

typescript 더보기