타입 선언문과 단언문

결론부터 말하면 단언문보다 선언문을 사용하는 것이 좋다.

선언문

interface Person {
  name: string
}

const alice: Person = { name: 'Alice' } // Type is Person

타입 선언문은 선언된 타입임을 명시하여 타입을 선언한다.

단언문

interface Person {
  name: string
}

const bob = { name: 'Bob' } as Person // Type is Person

단언문은 "as"를 사용한다. 이러면 타입스크립트가 추론한 타입이 있어도 강제로 "as" 뒤에 쓴 타입으로 간주한다.

선언문을 사용해야 하는 이유

interface Person {
  name: string
}
const alice: Person = {}
// ~~~~~ Property 'name' is missing in type '{}'
//       but required in type 'Person'
const bob = {} as Person // No error

이 코드를보면 alice에서는 name 속성이 없기 때문에 에러가 발생한다. 하지만 bob에서는 단언문으로 타입을 부여했고 name 속성이 없는데 에러가 발생하지 않았다. 즉, 선언문을 사용한다는 것은 타입 체커에게 강제로 타입을 지정했으니 오류를 무시하라고 하는 것이다. 따라서 단언문이 꼭 필요한 경우가 아니라면 선언문을 사용하는 것이 좋다.

단언문이 필요한 경우

-DOM 엘리먼트

document.querySelector('#myButton').addEventListener('click', e => {
  e.currentTarget // Type is EventTarget
  const button = e.currentTarget as HTMLButtonElement
  button // Type is HTMLButtonElement
})

타입스크립트는 DOM에 접근할 수 없기 때문에 DOM 엘리먼트에 대해서는 타입스크립트보다 개발자가 더 정확히 알고있다. 따라서 이런 경우에는 단언문을 사용하는 것이 더 좋다.

 

-"!" 문법

const elNull = document.getElementById('foo') // Type is HTMLElement | null
const el = document.getElementById('foo')! // Type is HTMLElement

뒤에 쓰이는 "!"는 값이 null이 아니라는 단언문으로 해석한다. 단언문은 컴파일 과정에서 제거되어 타입 체커는 알지 못하지만 값이 null이 아니라고 확신할 경우에 사용 가능하다.

 

-unknown

interface Person {
  name: string
}
const el = document.body as unknown as Person // OK

document.body as Person은 형식이 맞지 않기 때문에 에러가 발생한다. 이를 해결하기 위해서는 unknown 타입을 사용해야 한다. 모든 타입은 unknown의 서브타입이라서 unknown이 포함된 단언문은 항상 동작한다. 하지만 형식을 강제로 바꾸는 것은 위험도가 있기 
때문에 확신이 들때만 사용하는 것이 좋다.