제네릭 타입 별칭

제네릭 타입 별칭

간단한 예를 통해 타입 별칭에서 제네릭을 활용해 보겠습니다.

 

click이나 mousedown 같은 DOM 이벤트를 설명하는 FirstEvent 타입을 정의해 보겠습니다.

type FirstEvent<T> = {
    target: T
    type: string
}

타입 별칭에선 타입 별칭명과 할당 기호(=) 사이에만 제네릭 타입을 선언할 수 있습니다.

 

FirstEvent의 target 프로퍼티는 <button />, <div /> 등 이벤트가 발생한 요소를 가리킵니다. 

 

예시로 버튼 이벤트는 아래처럼 표현할 수 있습니다.

type FirstEvent<T> = {
    target: T
    type: string
}

type ButtonEvent = FirstEvent<HTMLButtonElement>

FirstEvent 같은 제네릭 타입을 사용할 때는 타입이 자동적으로 추론되지 않으므로 타입 매개변수를 명시적으로 한정해야 합니다.

let firstEvent: FirstEvent<HTMLButtonElement | null> = {
    target: document.querySelector('#firstButton'),
    type: 'click'
}

FirstEvent로 DateTimeEvent 같은 다른 타입을 만들 수도 있습니다. 

 

아래처럼 정의하면, TypeScript는 DateTimeEvent의 제네릭을 T로 한정할 때 이를 FirstEvent에도 적용합니다.

type DateTimeEvent<T> = {
    event: FirstEvent<T>
    from: Date
    to: Date
}

제네릭 타입 별칭을 함수 시그니처에도 사용할 수 있습니다. TypeScript는 구체 타입 T로 한정하면서 동시에 FirstEvent에도 적용합니다.

function triggerEvent<T>(event: FirstEvent<T>): void{
    // ...
}

triggerEvent({
    target: document.querySelector('#firstButton'),
    type: 'mouseover'
})

어떤 일이 일어나는지 단계별로 보겠습니다.

1. 객체에 triggerEvent를 호출합니다.
2. TypeScript는 함수의 시그니처 정보를 이용해 전달한 인수가 FirstEvent<T> 타입이어야 함을 파악합니다. 또한 FirstEvent<T>를 {target: T, type: string}으로 정의했다는 사실도 인지합니다.
3. TypeScript는 호출자가 전달한 객체의 target 필드가 document.querySelector('#firstButton')이라는 사실을 파악합니다. 즉, T의 타입은 document.querySelector('#firstButton')이며, document.querySelector('#firstButton')은 Element | null 타입입니다. 따라서 T는 Element | null 타입으로 한정됩니다.
4. TypeScript는 모든 T를 Element | null로 대체합니다.
5. TypeScript는 모든 타입이 할당성을 만족하는지 확인합니다.

이렇게 타입 확인이 이루어집니다.