타입가드

@2023/09/17

안녕하세요 lika-7입니다

이번 시간은 TypeScript의 타입 가드에 대한 내용을 정리하겠습니다

타입 가드란

타입 가드란 조건문 안에서 타입 범위를 한정 시켜주는 방법을 이야기합니다

이를 이용해 컴파일러는 어떤 타입을 사용할지 단서를 얻게 됩니다

타입 가드 사용 상황

//TypeScript

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

const h1E1 = document.querySelector('h1')
logText(h1E1)

위의 코드에서 h1E1의 변수의 타입을 지정하지 않아서 코드상 에러가 생깁니다.

//TypeScript

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

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

이를 해결하기 위해 as 키워드를 이용한 단언을 해주면 코드상에는 문제가 생기지 않지만

실행시 null 속성을 읽을 수 없다고 에러가 나옵니다.

//TypeScript

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

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

이를 해결하기 위해서 조건물을 사용하여 h1E1이 있을 때 함수가 실행되도록 만들었습니다.

위와 같이 조건물을 사용하여 타입 에러가 나는 것을 막는 문법을 타입 가드라고 합니다.

//TypeScript

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

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

위와 같이 instanceof문을 넣어 타입가드를 선언 할 수도 있습니다.

타입 가드 다른 예시

//TypeScript

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

마무리

💡

타입 가드는 자바스크립트에서도 유용하게 사용할 수 있는 스케일이고, 에러가 발생할 수 있는 상황을 코드가 방어한다는 개념이라고 생각하면 됩니다