TypeScript에서의 제네릭 변수

제네릭의 개념을 더 잘 이해하기 위해 첫 번째 함수인 항등 함수를 만들어 봅시다. 이러한 함수는 전달받은 값을 동일한 타입으로 그대로 반환합니다.

먼저, 함수의 여러 버전을 각각 작성해 보겠습니다.

숫자를 매개변수로 받아 숫자를 반환하는 함수를 작성해 보겠습니다:

function func(data: number): number {
	return data;
}

이제 문자열을 매개변수로 받아 문자열을 반환하는 함수를 작성해 보겠습니다:

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

이제 이 모든 작업을 하나의 함수로 수행하고 싶다고 가정해 봅시다. 즉, 일반화를 수행하려는 것입니다.

이를 위해 데이터 타입을 저장하는 타입 변수를 사용합니다. 이러한 변수는 함수 매개변수를 둘러싼 괄호 앞의 꺾쇠 괄호 안에 선언됩니다. 이름을 T (어떤 이름이든 가능)로 지정하여 이러한 변수를 선언해 보겠습니다:

function func <T>(여기에 매개변수) {
	return data;
}

그러면 T라는 변수가 생기고, 이 변수를 사용하여 매개변수의 타입을 저장한 다음 반환 타입으로 지정할 수 있습니다.

우리의 변수를 타입으로 하여 매개변수의 타입을 지정해 보겠습니다:

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

이렇게 하면 매개변수는 어떤 타입으로든 전달될 수 있으며, 그 타입이 우리의 T 변수에 저장됩니다.

이제 T 변수의 값을 사용하여 함수의 반환 타입을 지정해 보겠습니다:

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

이제 함수의 반환 타입은 매개변수의 타입에서 가져오게 됩니다. 확인해 봅시다.

숫자로 함수를 호출해 보겠습니다:

console.log( func(3) ); // 3을 출력합니다

문자열로 함수를 호출해 보겠습니다:

console.log( func('x') ); // 'x'를 출력합니다

두 개의 숫자 또는 두 개의 문자열을 매개변수로 받는 함수를 만드세요. 함수는 매개변수의 합을 반환해야 합니다.