Portfolio


//사례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인 객체로 단언됐으므로 에러 발생


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)

할당 단언