[TypeScript] 제네릭 제대로 사용하기

 

제네릭(Generic)이란?

C나 자바 같은 정적 언어에서 다양한 타입 간에 재사용성을 높이기 위해 사용하는 문법이다. 타입스크립트도 정적 타입을 가지므로 제네릭 문법을 지원한다.

제네릭의 사전적 의미는 일반적인 것(general)을 뜻하는데, 타입스크립트의 제네릭도 이와 비슷하게 '일반화된 데이터' 타입이라 볼 수 있다.

제네릭: 함수, 타입, 클래스 등에서 내부적으로 사용할 타입을 미리 정해두지 않고 타입 변수를 사용해서 해당 위치를 비워 둔 다음에, 실제로 그 값을 사용할 때 외부에서 타입 변수 자리에 타입을 지정하여 사용하는 방식

-> 이렇게 하면 함수, 타입, 클래스 등 여러 타입에 대해 하나하나 따로 정의하지 않아도 되기 때문에 재사용성이 크게 향상된다.

타입 변수는 일반적으로 <T>와 같이 꺾쇠괄호 내부에 정의되며, 사용할 때는 함수에 매개변수를 넣는 것과 유사하게 원하는 타입을 넣어준다.

타입 변수명으로 T(Type), E(Element), K(Key), V(Value) 등 한 글자로 된 이름을 많이 사용한다.

 

any와의 비교

any는 배열 요소들의 타입이 전부 같지 않을 수 있지만,

제네릭은 배열 생성 시점에 원하는 타입으로 특정한다. 즉, 배열 요소가 전부 동일한 타입으로 보장할 수 있다.

 

타입 추론과 기본값 사용

function exampleFunc<T>(arg: T): T[] {
	return new Array(3).fill(arg);
}

exampleFunc("hello"); // T는 string으로 추론됨

interface SubmitEvent<T = HTMLElement> extends SyntheticEvent<T> {submitter: T;} // 기본값 사용

제네릭 함수를 호출할 때 타입 명시 부분(<>)을 생략하면 컴파일러가 인수를 보고 타입을 추론해준다.

또한 특정 요소 타입을 알 수 없을 때는 제네릭 타입에 기본값을 추가할 수 있다.

 

주의점

배열에만 존재하는 length 속성을 제네릭에서 참조하려고 하면 당연히 에러가 발생한다. 컴파일러는 어떤 타입이 제네릭에 전달될지 알 수 없기 때문이다.

이럴 때는 제네릭 꺾쇠괄호 내부에 'length 속성을 가진 타입만 받는다'라는 제약을 걸어줌으로써 length 속성을 사용하게끔 만들 수 있다.

interface TypeWithLength {
	length: number;
}

function exampleFunc2<T extends TypeWithLength>(arg: T): number {
	return arg.length;
}

 

파일 확장자가 tsx일 때 화살표 함수에 제네릭을 사용하면 에러가 발생한다.

tsx는 타입스크립트 + JSX이므로 제네릭의 꺾쇠괄호와 JSX 태그의 꺾쇠괄호를 혼동하여 문제가 생기는 것이다!

제네릭 부분에 extends 키워드를 사용하여 컴파일러에게 특정 타입의 하위 타입만 올 수 있음을 확실하게 알려주면 된다.

보통 제네릭을 사용할 때는 function 키워드로 선언하는 경우가 많다.

// 에러 발생: JSX element 'T' has no corresponding closing tag
const arrowExampleFunc = <T>(arg: T): T[] => {
	return new Array(3).fill(arg);
}

// 에러 발생 X (객체 타입 확장)
const arrowExampleFunc2 = <T extends {}>(arg: T): T[] => {
	return new Array(3).fill(arg);
};

 

 

제네릭 사용법

함수의 제네릭

어떤 함수의 매개변수나 반환 값에 다양한 타입을 넣고 싶을 때

function ReadOnlyRepository<T>(target: ObjectType<T> | EntitySchema<T> | string):
Repository<T> {
	return getConnection("ro").getRepository(target);
}

// User 엔티티의 읽기 전용 저장소를 가져와서 읽기 전용 작업을 수행
const userRepository = ReadOnlyRepository<User>(User);

 

호출 시그니처(call signature)의 제네릭

호출 시그니처: 타입스크립트의 함수 타입 문법으로, 함수의 매개변수와 반환 타입을 미리 선언하는 것

호출 시그니처를 사용할 때 제네릭 타입을 어디에 위치시키는지에 따라 타입의 범위와 제네릭 타입을 언제 구체 타입으로 한정할지 결정할 수 있다.

export type UseRequesterHookType = <RequestData = void, ResponseData = void>(
baseURL?:
    string | Headers,
    defaultHeader?: Headers
) => [RequestStatus, Requester<RequestData, ResponseData>];

UseRequesterHookType 타입의 함수를 실제 호출할 때 제네릭 타입을 구체 타입으로 한정한다.

요청과 응답 타입이 특정 타입으로 고정되지 않고 상황에 맞춰 변경 가능해진다.

 

제네릭 클래스

제네릭 클래스: 외부에서 입력된 타입을 클래스 내부에 적용할 수 있는 클래스

제네릭 클래스를 사용하면 클래스 전체에 걸쳐 타입 매개변수가 적용된다.

class Box<T> {
    private _value: T;

    constructor(value: T) {
        this._value = value;
    }

    getValue(): T {
        return this._value;
    }

    setValue(value: T): void {
        this._value = value;
    }
}

// Box<string> 타입의 객체 생성
const stringBox = new Box<string>("Hello, world!");
console.log(stringBox.getValue()); // 출력: Hello, world!

// Box<number> 타입의 객체 생성
const numberBox = new Box<number>(42);
console.log(numberBox.getValue()); // 출력: 42

 

 

특정 메서드만을 대상으로 제네릭을 적용하려면 해당 메서드를 제네릭 메서드로 선언하면 된다. 

class Utility {
    static identity<T>(value: T): T {
        return value;
    }
}

// identity 메서드 호출 시 타입을 지정
console.log(Utility.identity<string>("TypeScript")); // 출력: TypeScript
console.log(Utility.identity<number>(123)); // 출력: 123

 

제한된 제네릭

제한된 제네릭: 타입 매개변수에 대한 제약 조건을 설정하는 기능

제한된 제네릭을 사용하면 타입 안전성을 강화하면서도 유연한 확장이 가능하다.

type ErrorRecord<Key extends string> = 
    Exclude<Key, ErrorCodeType> extends never 
        ? Partial<Record<Key, boolean>> 
        : never;

바운드 타입 매개변수(bounded type parameters): 타입 매개변수가 특정 타입으로 묶였을 때(bind) 키를 지칭

그리고 여기서 string을 키의 상한 한계(upper bound)라고 한다.

상속 받을 수 있는 타입으로는 기본 타입뿐만 아니라 상황에 따라 인터페이스나 클래스도 사용할 수 있다.

또한 유니온 타입을 상속해서 선언할 수도 있다.

 

확장된 제네릭

제네릭 타입은 여러 타입을 상속받을 수 있으며 타입 매개변수를 여러 개 둘 수도 있다.

<Key extends string> 이런 식으로 타입을 제약하면 제네릭의 유연성을 잃어버린다.

제네릭의 유연성을 잃지 않으면서 타입을 제약해야 할 때는 타입 매개변수에 유니온 타입을 상속해서 선언하면 된다.

<Key extends string | number>

 

유니온 타입으로 T가 여러 타입을 받게 할 수는 있지만, 타입 매개변수가 여러 개일 때는 처리할 수 없다. 이럴 때는 매개변수를 하나 더 추가하여 선언한다.

export class APIResponse<Ok, Err = string>{
	private readonly data: Ok | Err | null;
    private readonly status: ResponseStatus;
    private readonly statusCode: number | null;
    
    // ...
    
}

 

 

제네릭 예시

제네릭의 장점은 다양한 타입을 받게 함으로써 코드를 효율적으로 재사용하는 것이다.

현업에서 가장 많이 제네릭이 활용되는 곳은, API 응답 값의 타입을 지정할 때이다.

export interface MobileApiResponse<Data> {
    data: Data;
    statusCode: string;
    statusMessage?: string;
}

export const fetchPriceInfo = (): Promise<MobileApiResponse<PriceInfo>> => {
// ...
};
export const fetchOrderInfo = (): Promise<MobileApiResponse<Order>> => {
// ...
};

API 응답 값에 따라 달라지는 data를 제네릭 타입 Data로 선언하여 인터페이스 MobileApiResponse를 만들었다.

다양한 API 응답 값의 타입에 MobileApiResponse를 활용해서 코드를 효율적으로 재사용할 수 있다.

 

 

제네릭을 굳이 사용하지 않아도 되는 타입

제네릭을 필요한 곳에 사용하면 가독성과 효율성을 높일 수 있지만, 

필요하지 않은 곳에 제네릭을 사용하면 코드 길이만 늘어나고 가독성을 해칠 수 잇다.

// 불필요한 제네릭
type GType<T> = T;
type RequirementType = "USE" | "UN_USE" | "NON_SELECT";
interface Order {
    getRequirement(): GType<RequirementType>;
}

// 아래와 같다
type RequirementType = "USE" | "UN_USE" | "NON_SELECT";
interface Order {
    getRequirement(): RequirementType;
}

 

굳이 제네릭을 사용하지 않고 타입 매개변수를 그대로 선언하는 것과 같은 기능이다. 

 

any 사용

any를 사용하면 제네릭의 장점(재사용성)과 타입 추론 및 타입 검사를 할 수 있는 이점을 누릴 수 없게 된다.

any 타입은 모든 타입을 허용하기 때문에 사실상 자바스크립트와 동일한 방식이며, 제네릭을 포함해 타입을 지정하는 의미가 사라지게 된다.

 

가독성을 고려하지 않은 사용

제네릭이 과하게 사용되면 가독성을 해치기 때문에 코드를 읽고 타입을 이해하기 어려워진다.

복잡한 제네릭은 의미 단위로 분할해서 사용하는 게 좋다.

 

 

 

ref. 우아한 타입스크립트 with 리액트 - 제네릭 파트