[TypeScript] 제네릭 사용 예시

회사 프로젝트에서 리액트와 타입스크립트를 적용하여 진행 중인데 팀원이 유동적인 객체를 state 값으로 설정하려고 하는데 방법이 있는지 문의하였다. 이에 따라 제네릭을 활용하여 프로토타이핑한 내용을 기록하려 한다.

Code

// 타입 선언
type Test<T extends Record<string, any>> = T;

const test = <T extends Record<string, any>>(param: Test<T>) => {
  console.log('param:: ', param);
};

// 샘플 데이터 생성
const sampleObj = { key1: 'value1', key2: 42 };

test(sampleObj);

Code 설명

type Test<T extends Record<string, any>> = T;

type Test<T extends Record<string, any>> = T; Test라는 타입을 정의하는데, 이 타입은 어떤 객체 타입(T)이 와도 상관없다는 것을 의미한다.
여기서 T extends Record<string, any> 는 T 가 어떤 타입이던지 간에 Record 타입을 확장(extends)한다는 것을 의미한다.
Record 타입은 문자열 키를 가지는 모든 타입을 포괄하는 일반적인 객체 타입을 나타낸다.
즉, Test 타입은 어떤 객체 타입이라도 받아들이며, 해당 객체는 문자열 키를 가지는 모든 타입의 값을 포함할 수 있다.
이를 통해 유동적인 객체를 다루기 위한 일반적인 타입을 정의할 수 있다.

const test = <T extends Record<string, any>>(param: Test<T>) => {};

<T extends Record<string, any>> 은 제네릭을 선언하는 부분이다. <T> 는 어떤 타입이든 받아들이겠다는 것을 나타내고, extends Record<string, any> 는 T 가 Record 타입을 확장한다는 제약을 두는 것이다.
Record 타입은 문자열 키를 가지는 모든 객체를 나타낸다.
(param: Test<T>) => {} 는 함수를 정의하는 부분이다.
param 은 함수에 전달되는 매개변수이고, 이 함수는 Test<T> 타입의 인자를 받아들이며,
이는 위에서 정의한 제네릭 타입이다.