🌀 TS strict 적용하기

Prerequisite

tsconfig.json

"strict": true

요런 family option들 모두에 대해 강한 타입 체크를 해주는 옵션이다.

1. Null 타입 오류 및 함수 타입 오류 해결

Strict Null Check

function initEvents() {
  rankList.addEventListener('click', handleListClick);
}

rankList에 대한 null check가 필요하다. 따라서 initEvents 함수 최상단에 다음과 같은 Null check를 넣어줌으로써 해결한다.

 if (!rankList) {
    return;
  }

Strict Function Type Check

function의 argument type에 대해서도 정확하게 맞춰주어야 한다. 물론 tsconfig.json에서 ‘strictFunctionTypes:false’를 하며 에러가 사라지긴 한다.

예를 들어 handleClick이란 함수가 있고, 이걸 something에 addEventListener로 추가하려고 할 때 오류가 발생한다.

something.addEventListener('click', handleClick)

async function handleClick(event: MouseEvent) {
//...
}

에러 메시지를 차근차근 읽어보면 맨 끝에 이런 문구를 확인할 수 있는데

event의 Type이 MouseClick인데 addEventListener의 콜백의 파라미터 타입이랑 호환이 불가능해서 그렇단다. 타입을 MouseEvent → Event로 바꿔주면 된다.

여기서 배운점: 구글링을 잘 하기 전에 에러 메세지를 잘 확인하자. 구글링의 질을 높일 수 있다.

2. 타입스크립트 내장 타입의 위계 구조

DOM Element 타입 호환 관련해서 알고 있으면 유용할 것 같다.

// hierarchy: a > b > c 순으로 높다.
const a: Element;
const b: HTMLElement;
const c: HTMLDivElement;
// hierarchy: ev1 > ev2 > ev3 순으로 높다.
const ev1: Event;
const ev2: UIEvent;
const ev3: MouseEvent;

3. 타입 단언을 이용한 타입 에러 해결

recoveredList!.appendChild(li);

recoveredList 오브젝트가 possibly null일 수 있기 때문에 에러가 나타나는데 이때 ‘!’를 뒤에 붙여서 non-null임을 명시해 해결해볼 수 있다.
이런 타입 단언 시 주의점이 있는데

interface Food{
  type: string;
  price: number;
}

// type annotation
const sushi: Food = {
  type: Japanese;
  price: 18000;
}

// type assertion
const chicken = {} as Food;

타입 단언의 경우 타입 에러가 뜨지는 않지만 이후에 초기값을 정하지 않음으로써 발생하는 오류의 원인이 될 수 있다.

4. 옵셔널 체이닝 연산자

1번에서처럼 possible null 타입에 대해 매번 체크해줘도 되지만 번거로우므로 다음과 같이 optional chainig을 쓰면 더 간결하다.

recoveredList?.appendChild(li);

5. DOM 유틸 함수 활용성을 높이는 타입 정의

이전까지는 유틸함수를 아래와 같이 정의 해 사용하고 있었다.

//util
function $(selector: string) {
  return document.querySelector(selector);
}
// DOM
const confirmedTotal = $('.confirmed-total') as HTMLSpanElement;

아래와 같이 수정하면 더 간결해질 수 있고, 디폴트값을 정의함으로써 더 빠른 간결한 타입 추론이 가능하다.

//util - using generic
function $<T extends HTMLElement = HTMLDivElement>(selector: string) {
  const element = document.querySelector(selector);
  return element as T; // 리턴 타입에서 Null 없애기
}
// DOM
const confirmedTotal = $<HTMLSpanElement>('.confirmed-total');

강의 끝!

---

reference.

https://www.typescriptlang.org/tsconfig#strict

TS강의를 들으며 정리한 내용입니다.