본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq
250806(수) 37일차
문법 - 제네릭
함수에서의 제네릭 : 들어온 대로 나감
function pipe<T>(value: T): T {
return value;
}
const p1 = pipe(123); // number
const p2 = pipe("hello"); // string
const p3 = pipe(true); // boolean- T는 함수 호출 시점에 자동 추론되며 value의 타입이 곧 T가 되고 따라서 들어온 타입이 그대로 보존되어 반환된다
- any를 쓰는 경우와 달리, 타입 정보가 유지되므로 자동완성과 타입 체크가 가능해짐
객체 타입 보호 : 제네릭 없이는 잡을 수 없음
type User = { id: number; name: string };
const u = pipe<User>({ id: 1, name: "Kim", extra: true }); // ❌ 오류!- T를 명시적으로 지정하면 타입스크립트는 해당 타입 외의 속성에 대해 에러를 발생시킨다
- any 또는 일반 타입 변수로는 잡지 못하던 오류를 컴파일 시점에 잡아준다
클래스에서의 제네릭 : 상태 보존을 위한 타입 설계
class State<S, C = {}> {
constructor(private state: S, private config: C) {}
getState(): S {
return this.state;
}
}
const s = new State({ zip: 12345 }, { active: true });
s.getState().zip; // ✅ 자동완성- 클래스에서도 S, C 같은 타입 파라미터를 통해 다양한 타입에 대응할 수 있다
- 생성자 인자와 반환 타입이 일관되게 연결되며 자동 완성과 타입 추론이 정확하게 작동한다
keyof와 제네릭 – 타입 안에서 키를 뽑는다
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const obj = { a: 1, b: 2 };
getProperty(obj, "a"); // 1
getProperty(obj, "m"); // ❌ 오류: 'm'은 'a' | 'b'에 없음- keyof T를 통해 객체 타입의 키만 받을 수 있게 제한할 수 있다
- 이를 통해 동적인 속성 접근을 타입 안정성 있게 수행할 수 있다
인터페이스와 제네릭 – 타입의 조합을 유연하게
interface KeyPair<K, V> {
key: K;
value: V;
}
const kv1: KeyPair<number, string> = { key: 1, value: "one" };
const kv2: KeyPair<string, boolean> = { key: "x", value: true };- 인터페이스에 제네릭을 쓰면 조합 가능한 타입 쌍을 유연하게 정의할 수 있다
- 다양한 구조의 데이터에 공통 구조를 재활용할 수 있는 강력한 도구
이번 강의는 제네릭
제네릭은 타입스크립트에서 가장 강력하면서도 난해한 도구
초반에는 T, K, U 같은 기호가 추상적으로 느껴지지만 함수처럼 타입을 받아 흘려보낸다는 관점을 가지면 훨씬 이해하기 쉬워진다
객체의 타입 안정성 확보, 유틸리티 함수 제작, 클래스 기반 상태 설계, 리액트의 useState, useRef 등 실무 전반에서 제네릭은 필수적
제네릭을 이해한다는 건 타입스크립트를 진짜로 쓰기 시작했다는 뜻
