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

Rainbow🌈Coder 2022. 4. 26. 15:59

728x90

아래 스타일들도 제네릭 타입 별칭이다.

//읽기 전용 배열과 튜플 만드는 여러가지 선언 방법
type A = readonly string[];    //readonly string[]
type B = ReadonlyArray<string>;//readonly string[]
type C = Readonly<string[]>;   //readonly string[]
type D = readonly [number,string]; //readonly [number,string]
type E = Readonly<[number,string]>;//readonly [number,string]

간단한 예를 통해 타입 별칭에서 제네릭을 활용하는 방법을 더 자세히 살펴보자.

(참고로 이 예저 전에 ts에서 DOM을 부르기 위해

tsconfig.json의 lib 옵션

타입스크립트가 빌드 될 때 참조하는 tsconfig.json의 컴파일 옵션중에 lib이라는 항목이 있는데, 최소한 아래 스펙은 맞춰주어야한다.

// tsconfig.json
//참고 : https://norux.me/59
{
  "CompilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es5"
    ]
  }
}

click이나 mousedown 같은 DOM 이벤트를 설명하는 MyEvent 타입을 정의

//타입 별치에서는 타입 별칭명과 할당기호(=) 사이에만 제네릭 타입을 선언할 수 있다
type MyEvent<T> = {
  target: T;
  type: string;
};

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

예를 들어 버튼 이벤트는 다음처럼 표현할 수 있다.

type ButtonEvent = MyEvent<HTMLButtonElement>;

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

let myEvent: MyEvent<HTMLButtonElement | null> = {
  target: document.querySelector("#myButton"),
  type: "click",
};

MyEvent로 TimedEvent 같은 다른 타입을 만들 수 있다. 이렇게 정의하면 타입스크립트는 TimedEvent의 제네릭 T로 한정할 때 이름 MyEvent에도 적용한다.

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

제네릭 타입 별칭을 함수 시그니처에도 사용할 수 있다. 타입스크립트는 구체 타입 T로 한정하면서 동시에 MyEvent에도 적용한다.

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

triggerEvent({
  //T는 Element|null
  target: document.querySelector("#myButton"),
  type: "mouseover",
});

이제 어떤 일이 일어나냐면...

1. 객체에 triggerEvent를 호출한다

2. 타입스크립트는 함수의 시그니처 정보를 이용해 전달한 인수가 MyEvent<T> 타입이어야 함을 파악한다. 또한 MyEvent<T>를

{target: T, type: string }으로 정의했다는 사실도 인지한다.

3. 타입스크립트는 호출자가 전달한 객체의 target 필드가 document.querySelector('#myButton')이라는 사실을 파악한다. 즉, T의 타입은 document.querySelector('#myButton')이며 document.querySelector('#myButton')은 Element | null 타입이다. 따라서 T는 Element | null 타입으로 한정된다.

4. 타입스크립트는 모든 T를 Element | null 로 대체한다.

5. 타입스크립트는 모든 타입이 할당성을 만족하는지 확인한다. 이렇게 타입 확인이 이루어진다.

음... DOM 연동이 잘 안됨.

DOM 능숙해지고 다시 돌아와서 시도해봐야겠음

출처 : 타입스크립트 프로그래밍(책)

참고 문헌 : http://www.devdic.com/javascript/refer/grammar/document:2488/%EC%A0%84%EC%97%AD%EB%B3%80%EC%88%98%EB%A1%9C%EC%84%9C%EC%9D%98-DOM-%EC%B0%B8%EC%A1%B0

전역변수로서의 DOM 참조::JavaScript 레퍼런스

Writing 전역변수로서의 DOM 참조 들어가며 Click me window.addEventListener("load", function() { myButton.onclick = () => alert("Clicked"); }); 위와 같은 코드가 정상 작동할까? 놀랍게도 크롬(Chrome), 파이어폭스(Firefox),

www.devdic.com

<!DOCTYPE html>
<html>
<head></head>
<body>
<button type="button" id="myButton">Click me</button>

<script type="text/javascript">
window.addEventListener("load", function() {
    myButton.onclick = () => alert("Clicked");
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head></head>
<body>
<button type="button" id="myButton">Click me</button>

<script type="text/javascript">
window.addEventListener("load", function() {
    var myButton = document.querySelector("#myButton");
    myButton.onclick = () => alert("Clicked");
});
</script>
</body>
</html>

728x90