[패캠] 타입스크립트 문법 - 타입 가드 (6/20)

Fastcampus 프론트엔드 개발 강의

 

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

06. 타입 가드(Guards)

---

가드(Guard) : 방어, 경비 혹은 지키다.

 

아래 예시 코드는 에러가 발생한다. document.querySelector 메소드를 통해서 우리가 요소를 찾지 못하면 null 데이터가 반환이 되기 때문에 logText 함수의 아규먼트로 들어가는 h1El 변수의 타입과 일치하지 않는다.

function logText(el: Element) {
    console.log(el.textContent)
}

const h1El = document.querySelector('h1')
logText(h1El) // error

발생하는 에러를 해결하는 방법으로 h1El 변수 선언 시 단언 키워드 as를 사용하여 Element 타입으로 선정하거나, 더 구체적으로 HTMLHeadingElement 라는 상세 타입을 지정해줄 수 있다. (h1 ~ h6까지 해당됨)

function logText(el: Element) {
    console.log(el.textContent) // error
}

const h1El = document.querySelector('h1') as HTMLHeadingElement
logText(h1El)

하지만 코드를 실행해보면 함수 내 console.log()에서 에러가 발생한다. 해당 에러는 HTML 요소가 분명히 나올 거라는 단언이 잘못되었기 때문에 발생했다. 실제 나온 결과는 null 이었다.

타입스크립트 코드 자체에서는 에러가 발생하지 않는데 JavaScript 코드에서는 에러가 생긴 경우이다. 이런 경우 Type guard를 사용해서 해결할 수 있다.

function logText(el: Element) {
    console.log(el.textContent)
}

const h1El = document.querySelector('h1')
if (h1El) {
	logText(h1El)
}

h1El가 null로 조건문에서 거짓이라면 if문의 내용은 실행되지 않을 것이고 에러가 발생하는 일은 없어진다. 이렇게 작성한 if 조건문이 Type guard가 된다.

정리하면, if 조건에 작성한 h1El 의 타입이 정확히 무엇인지 모르겠지만 거짓 데이터가 아닐 때만 이 부분의 내용이 실행이 될 수 있는 구조이기 때문에 방어(guard)가 됐다는 의미이다. 그 결과 타입스크립트에서도 에러가 보이지 않고 실제 동작에서도 에러가 발생하지 않는다.

어떻게 보면 타입스크립트랑 별 상관이 없는 코드처럼 보일 수 있는 Type guard의 개념은 간단하다. 실제로 그 데이터가 존재할 때만 내용이 동작하게 만들어 준 것이다.

또 다른 방법

instanceof 키워드를 통해서 h1El가 어떤 클래스의 인스턴스인지 명시해줄 수 있다. 타입 단언을 사용한 방법과 같이 HTMLHeadingElement라는 클래스를 붙여줄 수 있다.

아래 코드는 document.querySelector를 통해서 요소를 찾지 못하게 되면 null 데이터가 반환 되는데, null이라면 당연히 HTMLHeadingElement 라는 클래스의 인스턴스가 아닐 것이고 if 문 내의 logText()는 호출되지 않는다.

function logText(el: Element) {
    console.log(el.textContent)
}

const h1El = document.querySelector('h1')
if (h1El instanceof HTMLHeadingElement) {
	logText(h1El)
}

반대로 h1 요소를 잘 찾는다면, 입력한 선택자 h1 요소일 것이다. 그러면 HTMLHeadingElement 클래스의 인스턴스라는 if 조건의 내용이 참이 되고 logText() 함수는 호출된다. 그렇게 아규먼트로 들어간 h1El 값을 el 이라는 파라미터가 받아서 textContent 속성을 사용하여 console.log() 출력이 정상적으로 가능하다.

Type guard는 if 조건이나 기타 다양한 내용들을 통해서 작성된 코드가 실제로 잘 동작할 수 있도록 코드 상에서 방어를 한다. 그때 조건으로 들어가는 내용은 무엇이든 상관 없다.

 

다른 예시 코드,

function add3(val: string | number | boolean) {
    let res = 'Result => '
    if (typeof val === 'number') {
        res += val.toFixed(2)
    } 
    if (typeof val === 'string') {
        res += val.toUpperCase()
    }
    console.log(res)
}

add3(3.141592)
add3('hello world')

애초에 에러가 발생할 수 있는 상황 자체를 코드 상에서 방어한다는 개념이기 때문에 Type guard는 JavaScript에서도 중요하게 사용할 수 있는 스킬이라고 볼 수 있다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY