7.1 기본 타입 정의

7.1.1 제네릭이란?

타입스크립트는 제네릭이란 타입을 제공합니다. 이 제네릭 타입을 사용하면 다양한 타입에 대응할 수 있는 코드를 작성할 수 있습니다.

1) 제네릭을 사용하는 이유

function returnNumber(x: number): number {
	return x;
}

console.log(returnNumber(1)); // 1
console.log(returnNumber('1')); // Error

function returnString(x: string): string {
	return x;
}

console.log(returnString('2')); // '2'
console.log(returnString(2)); // Error

returnNumber 함수는 1개의 number 타입 매개변수 x를 받고 x를 그대로 반환합니다. returnString 함수는 1개의 string 타입 매개변수 x를 받고 x를 그대로 반환합니다.

두 함수는 각각 number와 string 타입에 대해서만 작동합니다. 이때 제네릭을 사용하면 2개의 함수로 나누지 않고 1개의 함수로 만들 수 있습니다.

function returnParam<T>(x: T): T {
	return x;
} 

console.log(returnParam<number>(2));
console.log(returnParam<string>('2'));

<>안에 타입을 넘겨주지 않아도 전달되는 인수의 타입으로 T의 타입을 추론할 수 있습니다.

function returnParam<T>(x: T): T {
	return x;
} 

console.log(returnParam(2));
console.log(returnParam('2'));

2) 제네릭 사용법

제네릭은 꺾쇠괄호(<>)와 타입 매개변수를 함께 사용해서 작성할 수 있습니다.

function pair<T, U>(x: T, y: U): [T, U] {
	return [x, y];
}

console.log(pair<number, string>(1, 'a')); // [1, a]

pair 함수는 2개의 매개변수 x, y를 받아서 튜플로 반환하는 함수입니다. 꺾쇠괄호(<>) 안에 타입 변수인 T, U의 타입을 넣어 사용할 수 있습니다. 타입 매개변수는 마음대로 정할 수 있습니다. 일반적으로 대문자 알파벳 한 글자로 표현합니다.(T,U,K…)

7.2 콜백 함수에서의 제네릭

7.2.1 타입스크립트의 콜백 함수

다른 함수의 인자로 전달되어 호출되는 함수를 콜백 함수라고 합니다. 타입스크립트에서는 매개변수와 반환 타입을 명시하여 보다 높은 안정성을 제공합니다.

1) 콜백 함수 타입 정의