TypeScript 공부(4)

타입 가드(Guards)

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

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

타입스크립트에서는 querySelector 메서드가 반환하는 값이 Element | null 타입으로 추론되기 때문에, null일 가능성을 고려해야 합니다. 이 경우, 타입 가드를 사용하여 null 여부를 확인한 후에 함수에 인자를 전달하는 방법으로 문제를 해결할 수 있습니다.

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

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

이번에는 새로운 예제로 다시한번 확인해 보겠습니다.

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

add(3.1415926535)
add('hello world')