[TS] 타입 가드

위 코드에 적혀있는 컨테이너의 타입을 작성해보자.

 

getElementById에 마우스 커서를 올려놓으면 이렇게 메세지가 뜨는걸 볼 수 있다.

document.getElementById는 인자로 elementId를 받는데 : string으로 되어있다.

이건 elementId의 타입은 string이야 라고 알려주는 것이다.

다음 괄호가 닫혀있고, 콜론이 또 나오는데 이렇게 함수 인자 바로 뒤에 콜론은

이 함수의 반환값 타입이다.

이 반환값 타입은 HTMLElement 또는 null 로 둘 중에 하나가 반환될 수 있다는 의미로

이런 것을 유니온 타입이라한다.

그럼 이 반환값을 바로 container 뒤에 적용시켜 보았다.

 

그런데... 조금 이상하다.

위에서 분명 conatainer의 타입값을 적용시켰는데

container를 사용하는 코드로 가보니 또 밑줄이 그어져있다....

에디터의 힌트를 살펴보았다....

 

이 컨테이너 오브젝트는 null값이 들어가는게 가능하다는 뜻으로

코드를 살펴보면 container에 innerHTML이라는 속성으로 접근을 하고 있다.

그런데 만약에 얘가 위에서 타이핑된 대로 null이 들어가 있었다면?

null은 값이 비어있는 상태인데 innerHTML이라고 하는 속성은 있을리가 없다. 

즉, null이 들어가면 오류가 발생한다는 의미이다.

 

조건문을 사용해서 코드 상으로 null이 들어가 있지않은 경우에만 innerHTML에 접근하게

코드를 작성해주면 된다.

만약에 null이다 라고 한다면 getElementById('root')가 실패한 것이고

index.html 파일 안에 div 태그의 id가 root인 그런 div 태그가 없으니까 null 이 넘어왔다는 것이다.

이럴땐 사용자에게 메세지를 전달해주면 된다.

 

<작성코드>

 

이렇게 어떤 유형의 값이 2가지가 들어온 케이스,
그 중에 1가지는 null인 데이터가 없는 케이스에서 무작정 데이터가 당연히 있다고 생각하고 속성을
접근했을 경우,  null을 체크해라 라고 하는 유형의 코드를 타입을 방어한다고 해서  타입 가드라고 한다.

 

타입 가드 코드를 작성해두면

우리가 만든 앱이 상황에 따라서 갑자기 죽거나 브라우저에서 아무런 동작도 하지 않은 상황을 

최소화 할 수 있는 코드이기때문에 반드시 작성하는 습관을 들이도록하자