제네릭 함수
호출 시점의 타입을 보존하는 제네릭 함수를 만들고 여러 타입 변수·extends 제약·keyof로 안전한 속성 접근을 구현합니다.
우리는 지금까지 숫자, 문자열, 객체처럼 구체적인 타입을 다루는 함수들을 살펴봤습니다.
하지만 실무에서는 특정 타입에 묶이지 않고 다양한 타입에서 동작하는 재사용 함수가 필요합니다.
예를 들어 배열의 마지막 요소를 반환하는 함수를 만들 때, 숫자 배열이든 문자열 배열이든 객체 배열이든 동일하게 쓰고 싶은 상황이 대표적입니다.
이런 상황에서 제네릭(Generics)이 빛을 발합니다.
제네릭은 C#이나 Java에서도 널리 쓰이는 개념으로, 타입스크립트에서는 함수, 클래스, 인터페이스 전반에서 사용할 수 있습니다.
코드를 작성할 때 타입을 고정하지 않고, 사용 시점에 타입을 결정하도록 열어 둘 수 있다는 점이 핵심입니다.
덕분에 재사용성과 타입 안전성을 동시에 확보할 수 있습니다.
제네릭 함수의 기본 개념
T는 함수가 호출될 때 정해지고, 매개변수와 반환값에 같은 타입 정보가 이어진다.
- Call value 인자
들어온 실제 타입을 관찰
- Infer T 문자열이면 T=string, 숫자면
T=number
- Apply 함수 전체의 T 자리에 같
타입 대입
- Return 반환값도 같
타입 정보 유지
| 점검 | 기준 |
|---|---|
| extends | 필요한 속성이나 형태만 제한 |
| keyof | 객체에 실제 존재하는 key만 허용 |
| any와 차이 | 타입 정보를 포기하지 않고 재사용 |
제네릭 함수를 만들 때는 타입 변수(Type Variable)를 사용합니다.
이 타입 변수는 함수가 다룰 타입을 위한 임시적인 플레이스홀더(Placeholder) 역할을 합니다.
타입 변수는 일반적으로 꺾쇠 괄호(< >) 안에 선언하며, <T>처럼 단일 대문자를 사용하는 것이 일반적입니다.
예시를 통해 제네릭 함수의 기본 구조를 살펴보겠습니다.
입력받은 값을 그대로 반환하는 간단한 identity 함수를 만들어봅시다.
// 1. 제네릭을 사용하지 않은 경우 (any 타입 사용)
function identityAny(arg: any): any {
return arg;
}
let outputAny1 = identityAny("myString"); // outputAny1의 타입은 any
let outputAny2 = identityAny(123); // outputAny2의 타입은 any
// any를 사용하면 어떤 타입이든 받을 수 있지만, 반환되는 값의 타입 정보를 잃어버립니다.
// outputAny1.length; // 런타임 오류 가능성 (number일 경우)
// 2. 제네릭을 사용한 경우
function identity<T>(arg: T): T {
return arg;
}
// 함수 호출 시 타입 인자(Type Argument)를 명시적으로 전달
let output1 = identity<string>("myString"); // output1의 타입은 string으로 추론됩니다.
let output2 = identity<number>(123); // output2의 타입은 number로 추론됩니다.
// 대부분의 경우 타입 추론에 의해 타입 인자를 생략할 수 있습니다.
let output3 = identity("anotherString"); // output3의 타입은 string으로 추론됩니다.
let output4 = identity(true); // output4의 타입은 boolean으로 추론됩니다.
console.log(output1.length); // 안전하게 .length 속성에 접근 가능
// console.log(output2.toFixed(2)); // 안전하게 .toFixed(2) 메서드에 접근 가능
// console.log(output1.toFixed(2)); // 오류: 'string' 형식에 'toFixed' 속성이 없습니다. (타입 안전성 유지)- 타입 변수
<T>: 함수 이름 바로 뒤에T와 같은 타입 변수를 선언합니다. 이T는 함수가 호출될 때 실제 타입(예:string,number)으로 대체됩니다. - 유연성:
arg: T를 통해 함수의 매개변수arg가 어떤 타입이든 받을 수 있고, 받은 그 타입과 동일한 타입을 반환함을 명시합니다. - 타입 안전성 유지:
any처럼 타입 검사를 포기하는 것이 아니라, 실제 사용될 타입 정보를 보존하여 타입 안전성을 유지합니다.output1은string타입으로 추론되었으므로toFixed와 같은number타입 메서드에 접근하면 오류를 발생시킵니다.
제네릭 여러 개 사용하기
하나의 제네릭 함수는 여러 개의 타입 변수를 가질 수 있습니다.
예를 들어, 두 개의 다른 타입 인자를 받아 처리해야 할 때 유용합니다.
function pair<T1, T2>(arg1: T1, arg2: T2): [T1, T2] {
return [arg1, arg2];
}
let myPair = pair("hello", 123); // myPair의 타입은 [string, number]로 추론됩니다.
let anotherPair = pair(true, { name: "Alice" }); // anotherPair의 타입은 [boolean, { name: string }]으로 추론됩니다.
console.log(myPair[0].toUpperCase()); // "HELLO" (string 메서드 사용 가능)
console.log(myPair[1].toFixed(2)); // "123.00" (number 메서드 사용 가능)pair<T1, T2>처럼 여러 타입 변수를 콤마로 구분하여 선언할 수 있습니다.
반환 타입 [T1, T2]는 두 타입 변수를 요소로 갖는 튜플을 반환하겠다는 의미입니다.
제네릭 제약 조건
때로는 제네릭 타입 변수가 모든 타입을 허용하는 것이 아니라, 특정 조건을 만족하는 타입만 허용하도록 제한하고 싶을 때가 있습니다.
예를 들어, length 속성을 가진 값만 받을 수 있는 함수를 만들고 싶다면, string이나 배열(Array)은 가능하지만 number는 불가능하게 해야 합니다.
이때 제네릭 제약 조건을 사용합니다.
제약 조건은 extends 키워드를 사용하여 정의하며, T는 X 타입의 속성을 가지고 있어야 한다는 의미를 가집니다.
interface Lengthwise {
length: number;
}
// T는 Lengthwise 인터페이스를 확장해야 합니다.
function getLengthWithConstraint<T extends Lengthwise>(arg: T): number {
return arg.length;
}
// Lengthwise 인터페이스를 만족하는 타입들은 허용됩니다.
console.log(getLengthWithConstraint("hello world")); // 11 (string은 length 속성을 가집니다.)
console.log(getLengthWithConstraint([1, 2, 3])); // 3 (배열도 length 속성을 가집니다.)
console.log(getLengthWithConstraint({ length: 10, value: "test" })); // 10 (객체 리터럴도 가능)
// 오류: length 속성이 없는 타입은 허용되지 않습니다.
// console.log(getLengthWithConstraint(123)); // Error: 'number' 형식에 'length' 속성이 없습니다.
// console.log(getLengthWithConstraint(true)); // Error: 'boolean' 형식에 'length' 속성이 없습니다.T extends Lengthwise는 타입 변수 T가 Lengthwise 인터페이스가 정의하는 length: number 속성을 반드시 가지고 있어야 한다는 제약 조건을 설정합니다.
이로 인해 함수 내부에서 arg.length에 안전하게 접근할 수 있게 됩니다.
keyof 연산자와 제네릭
keyof 연산자는 객체 타입의 모든 속성 이름을 문자열 리터럴 유니온 타입으로 반환합니다.
이 keyof 연산자를 제네릭과 함께 사용하면, 객체의 특정 속성에 안전하게 접근하는 함수를 만들 수 있습니다.
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
let user = {
name: "김철수",
age: 30,
city: "서울",
};
// K는 'name', 'age', 'city' 중 하나여야 합니다.
let userName = getProperty(user, "name"); // userName의 타입은 string
let userAge = getProperty(user, "age"); // userAge의 타입은 number
console.log(userName); // 김철수
console.log(userAge); // 30
// 오류: 'address'는 user 객체의 속성이 아닙니다.
// let userAddress = getProperty(user, "address"); // Error: Argument of type '"address"' is not assignable to parameter of type '"name" | "age" | "city"'.여기서 K extends keyof T는 타입 변수 K가 T 타입의 객체가 가질 수 있는 속성 이름들(즉, keyof T) 중 하나여야 함을 의미합니다.
이렇게 하면 obj[key] 접근이 타입 안전하게 보장됩니다.
K extends keyof T 는 두 번째 인자가 실제 객체 키 중 하나인지 먼저 확인하고, T[K] 로 결과 타입을 보존합니다.
- 호출 시점의 객체 구조
잃지 않고 함수 안으로 전달합니다.
- 문자열이면 무엇이든 받
대신, 실제 키 집합 안에서만 움직입니다.
- T[K] 접근한 속성의 값 타입
그대로 반환 타입으로 연결합니다.
| 단계 | 타입 식 | 컴파일러가 확정하는 것 |
|---|---|---|
| 1. 객체에서 T 추론 | T = User | name, age, city 속성을 가진 객체 구조를 보존합니다. |
| 2. 키 집합 계산 | keyof T | 가능한 키를 "name" | "age" | "city"로 좁힙니다. |
| 3. K를 키로 제한 | K extends keyof T | "address"처럼 목록 밖의 문자열은 인자로 받지 않습니다. |
| 4. 값 타입 반환 | T[K] | "age"를 넣으면 number, "name"을 넣으면 string이 됩니다. |
아래 다이어그램은 제네릭 타입 보존, 여러 타입 변수, 제약 조건, keyof 접근을 재사용 함수 설계 흐름으로 연결합니다.
identity<T>(arg: T): T는 입력 타입을 반환 타입까지 연결해 이후 메서드 사용을 안전하게 만든다.
- InputInput identity("hello")
인자 타입을 확인
- T bindingbinding T
string으로 고정
- ReturnReturn 반환값도 string
추론
- Safe useSafe use length 같
string 멤버를 안전하게 사용
| 신호 | 대응 |
|---|---|
| any 사용 | 반환 타입이 흐려져 후속 오류가 늦게 드러남 |
| generic 사용 | 입력과 반환의 관계가 타입으로 보존됨 |
| 제약 추가 | 필요한 속성이 있으면 extends로 최소 조건만 요구 |
아래 다이어그램은 제네릭 함수를 만들 때 타입 변수를 열어 둘지, 제약할지, 속성 키까지 연결할지를 단계적으로 정리합니다.
입력 타입과 반환 타입의 관계를 유지하면서 필요한 순간에만 조건을 추가합니다.
- 타입 보존
받은 타입을 그대로 반환하거나 전달합니다. identity<T>(x: T): T
- 관계 확장
T, U 서로 다른 타입을 튜플이나 객체로 묶습니다. pair<T, U>
- 조건 부여
extends 필요한 속성이 있을 때만 타입을 제한합니다. T extends Lengthwise
- 키 연결
keyof 객체의 실제 키만 안전하게 접근합니다. K extends keyof T
제네릭 함수는 입력 타입과 반환 타입의 관계를 보존하면서 함수를 재사용하게 해 줍니다.
타입 매개변수, 제약 조건, 기본 타입을 적절히 두면 같은 구현을 여러 타입에 적용하면서도 호출 지점의 타입 정보를 유지할 수 있습니다.
다음 다이어그램은 제네릭 함수를 타입 보존과 제약 조건 중심으로 정리한 복습표입니다.
타입 매개변수를 사용하면 함수가 구체 타입을 미리 고정하지 않아도 호출 시점의 타입 정보를 잃지 않습니다.
- 입력과 결과 연결
타입 보존 T를 사용하면 인자로 들어온 구체 타입이 반환 타입에도 이어집니다. identity<T>
- 관계 표현
복수 매개변수 T와 U처럼 여러 타입 변수를 두면 두 입력의 관계를 더 정확히 표현합니다. <T, U>
- 필요 속성 보장
extends 제약 length나 id처럼 함수가 실제로 쓰는 속성만 제약으로 요구합니다. T extends HasId
- 키 안전성
keyof 활용 객체의 실제 키만 선택하게 만들어 잘못된 속성 접근을 막습니다. K extends keyof T
제네릭 함수를 코드에 적용하기 전, 컴파일 오류가 막아 줄 지점과 사람이 약속해야 할 지점을 나눕니다.
구체 타입을 미리 고정하지 않고도 입력과 출력 사이의 타입 관계를 보존할 수 있어 반복 함수의 안정성이 높아집니다.
- 입력 타입 보관
타입 변수 T 같은 타입 변수가 호출 시점의 실제 타입을 받아 함수 내부와 반환값에 전달합니다. <T>
- 관계 분리
여러 변수 입력과 출력, 키와 값처럼 서로 다른 역할은 T와 K처럼 나눠 표현합니다. <T, K>
- 필요한 속성 보장
제약 조건 extends로 최소 구조를 요구하면 내부에서 안전하게 속성에 접근할 수 있습니다. T extends
- 키 선택 안전화
keyof 객체의 실제 키만 인자로 받게 만들어 속성 접근 실수를 줄입니다. K keyof T
아래 다이어그램은 제네릭 함수가 any 없이 입력과 반환의 타입 관계를 보존하는 방식을 정리합니다.
제네릭 함수의 타입 변수는 아무 타입이나 허용한다는 뜻이 아니라 들어온 타입 정보를 결과까지 연결하는 이름입니다.
- 타입 변수호출 때 결정
타입 변수 함수 이름 뒤의 T는 호출 시 실제 타입으로 대체되어 내부와 반환에 공유됩니다. identity<T>(arg: T)
- 여러 변수관계가 둘 이상일 때
여러 변수 입력 두 개의 타입이 서로 다르면 T와 U처럼 별도 타입 변수로 표현합니다. <T, U>
- 제약 조건필요한 속성 요구
제약 조건 length 같은 속성을 쓰려면 extends로 최소 조건을 먼저 선언합니다. T extends { length: number }
- keyof 연결속성 이름을 안전하게
keyof 연결 객체와 키를 함께 받을 때 K extends keyof T로 잘못된 키 접근을 막습니다. K extends keyof T