[타입스크립트] 제네릭 타입 별칭

type MyEvent<T> = {
  target: T;
  type: string;
};

type ButtonEvent = MyEvent<string>;

let myEvent: MyEvent<string | null> = {
  target: "홍길동이벤트",
  type: "click",
};

type TimedEvent<T> = {
  event: MyEvent<T>;
  from: Date;
  to: Date;
};

function trggerEvent<T>(event: MyEvent<T>): void {
  console.log(event);
}

trggerEvent({
  target: "황진이이벤트",
  type: "mouseover",
});

 

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

type MyEvent<T> = {
target: T;
type: string;
};

 

 

 아래와 같이 할당 가능

;

type ButtonEvent = MyEvent<'HTMLButtonElement'>;

 

다만 제네릭 타입 별칭에서 타입이 자동 추론되지 않으므로 타입 매개변수를 명시적으로 한정해야 한다.

let myEvent: MyEvent<string | null> = {
target: "홍길동이벤트",
type: "click",
};

 

그리고 다른 타입을 만들 수도 있다.

이렇게 되면 타입스크립트는 T를 연결지어 적용시킨다.

 

type TimedEvent<T> = {
event: MyEvent<T>;
from: Date;
to: Date;
};​

 

제네릭 타입 별칭을 함수 시그니처에서도 사용할 수 있다.

타입스크립트는 구체타입 T로 한정하면서 동시에 MyEvent에도 적용한다.

function trggerEvent<T>(event: MyEvent<T>): void {
console.log(event);
}

trggerEvent({
target: "황진이이벤트",
type: "mouseover",
}); //{ target: '황진이이벤트', type: 'mouseover' }