[TS]타입스크립트에서 DOM 사용하기

1. 타입 단언(Type Assertion) 사용하기

TypeScript에서는 as 키워드를 사용하여 타입 단언을 할 수 있다. 예를 들어, 다음과 같이 HTMLElement 타입으로 DOM 객체를 단언할 수 있음.

const myElement = document.querySelector('#my-element') as HTMLElement;

위 예제에서 document.querySelector는 Element | null 타입을 반환. 하지만 as HTMLElement를 사용하여 반환값을 HTMLElement 타입으로 단언했음.

2. 타입 가드(Type Guard) 사용하기

TypeScript에서는 typeof, instanceof, in 등의 연산자를 사용하여 타입 가드를 만들 수 있다. 예를 들어, 다음과 같이 HTMLElement 타입인지를 확인하는 타입 가드 함수를 만들 수 있음.

function isHTMLElement(element: Element): element is HTMLElement {
  return (element as HTMLElement).style !== undefined;

위 예제에서 isHTMLElement 함수는 Element 타입의 인자를 받아 HTMLElement 타입인지 확인하고 true 또는 false를 반환합니다. 이 함수를 사용하면 다음과 같이 HTMLElement 타입으로 narrowing할 수 있습니다.

2-1 타입가드 함수와 'is' 키워드

타입가드 함수란?

TypeScript에서 변수의 타입을 런타임 시점에서 체크하고, 해당 변수가 어떤 타입인지를 알려주는 함수.

타입가드 함수에 'is'

is는 타입 가드(Type Guard) 함수에서 사용되는 키워드. is 키워드는 함수의 반환 타입을 boolean이 아닌 variable is Type 형태로 지정할 때 사용됨.

function isNumber(value: any): boolean {
  return typeof value === 'number';
}

const myVar: any = 123;
if (isNumber(myVar)) {
  // myVar는 number 타입
}

위 코드에서 if문 내의 코드는 isNumber 함수의 반환값인 boolean 타입에 따라 실행됩니다. 그러나 이 코드에서는 변수의 타입이 런타임 시점에서 체크되지 않음.

반면에 is 키워드를 사용하여 함수의 반환 타입을 variable is Type 형태로 지정하면, 변수의 타입이 런타임 시점에서 체크된다.

function isNumber(value: any): value is number {
  return typeof value === 'number';
}

const myVar: any = 123;
if (isNumber(myVar)) {
  // myVar는 number 타입
}

3. Optional chaining 사용하기

Optional chaining 연산자(?.)를 사용하여 DOM 객체의 속성에 접근할 수 있음. 예를 들어, 다음과 같이 HTMLElement 타입으로 narrowing이 가능하다.

const myElement = document.querySelector('#my-element');
if (myElement?.classList) {
  // myElement는 HTMLElement 타입입니다.
}

위 예제에서 ?. 연산자를 사용하여 myElement 객체의 classList 속성에 접근. 이 때, myElement 객체가 null 또는 undefined인 경우에는 undefined를 반환하므로 if문 내의 코드가 실행되지 않는다.