Portfolio

타입 단언 (type assertion)

사례1. 아이디나 클래스 이름으로 엘리먼트를 가져오면, 컴파일러는 이게 무슨 타입의 dom인지 모른다(html코드를 검사 하진 않음). 그 때 특정 타입에 해당하는 속성을 쓰고 싶다면 타입 단언을 해줘야 에러가 나지 않는다

사례2. 유니온 타입일 때, 특정 타입에서만 쓸 수 있는 함수등을 사용한다면 단언이 필요

사례3. 비동기 작업의 결과를 올바르게 접근하기 위해 단언이 필요할 수 있음

변수 as 타입 or <타입> 변수 ⇒ 해당 타입으로 컴파일러에게 단언

(한 프로젝트에서는 두가지 방법중 하나로 통일하는게 좋다)

선언할 때 단언하거나, 값을 쓸 때마다 단언할 수 있다


//사례1
//as로 단언
const btn4 = document.querySelector('.button') as HTMLButtonElement //선언할 때 단언
const btn3 = document.querySelector('.button')
(btn3 as HTMLButtonElement).classList.add('btn') //값을 쓸 때 단언

btn3.onclick = () => {} //X, btn3는 어떤 타입이라 단언되지 않아서 그저 Element라고만 알고 있다. 
//element에는 onclick 속성이 없으므로 에러가 남

//<>로 단언
const btn5 = <HTMLButtonElement> document.querySelector('button')



//사례2. 유니온 타입일 때 단언하기
function def(val: number | string) { 
	const a = val.toFixed(2) //X, val이 string일 수도 있으니까
	const b = val.slice(0,2) //X, val이 number일 수도 있으니까

	const a = ((val as number).toFixed(2) //O
	const b = ((val as string).slice(0,2) //O
}


//사례3. 비동기 작업 결과 단언
const json = '{"name":"heropy", "age":23}'
const user = JSON.parse(json) as {name:string, age:number}
user.email // X, 속성이 name과 age인 객체로 단언됐으므로 에러 발생

할당 단언

타입이 할당되지 않아도 할당 되었다고 단언할 수 있다

변수명! ⇒ null이 아니라고 컴파일러에게 단언


let num:number
console.log(num) //에러, 타입을 지정했음에도 할당되지 않아서 에러 발생

let num2!: number //값이 null이 아니라고 단언한다
console.log(num2)


const btn = document.querySelector('button')
btn.classList.add('btn') //X btn이 null일 수도 있다는 에러가 난다

const btn1 = document.querySelector('button')! //선언할 때 단언
const btn2 = document.querySelector('button')
btn2!.classList.add('btn1') //값을 쓸 때 단언

타입 단언과 할당 단언

타입 단언 (type assertion)

할당 단언