[TypeScript] 타입 선언과 타입 단언

 

타입스크립트에서 변수에 값을 당하고 타입을 선언하는 방법은 타입 선언, 타입 단언 2가지 형태가 있다.

 

📄 사용예제

interface Person { name: string };

// 타입 선언: 그 값이 선언된 타입임을 명시
const alice: Person = { name: 'Alice' };

// 타입 단언: 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주
const alice = { name: 'Alice' } as Person;

 

 

◽ 타입 선언

타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다.

아래 예제에서는 Person에 맞는 속성이 없기떄문에 타입스크립트에서 오류를 표시한다.

// 타입 선언
const alice: Person = {}; // error: 'Person' 유형에 필요한 'name' 속성이 {}에 없습니다.

 

 

◽ 타입 단언

하지만 타입 단언으로 선언하면 에러없이 통과하는데, 이유는 강제로 타입을 지정했으니 타입 체커에게 오류를 무시하라고 하는 의미와 같아서이다.

따라서 타입 단언은 꼭 필요한 경우가 아니라면 안전성 체크가 되는 타입 선언을 사용하는 것이 더 좋다.

// 타입 단언
// 축약형으로 <Person>{} 같은 형태로 쓰기도 한다.
const alice = {} as Person; // pass

 

 

💡 타입 단언을 사용해야하는 경우

 

타입 체커가 추론한 타입보다 내가 직접 판단하는 타입이 더 정확할 때 사용하는게 좋다.

예를 들어, 타입스크립트는 DOM에 접근할 수 없기 때문에 document.querySelector('#myButton')로 접근했을 때 #myButton이 버튼 엘리먼트인 것을 알지 못한다.

 

접미사로 "!"를 사용하여 null이 아님을 단언할 수도 있다. (접두사 !는 boolean의 역할)

이 때 단언문은 컴파일 과정에서 제거되므로, 꼭 null이 아닌 경우에만 사용해야 하고 아니면 null을 체크하는 조건문을 추가해야한다.

 

const el = document.getElementById('foo') // 타입은 HTMLElement | null
const el = document.getElementById('foo')! // 타입은 HTMLElement

 

 

 

---

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.