타입스크립트 - 타입 추론 & 단언

제네릭을 사용한 타입 추론

 

interface Dropdown<T> {
  value: T;
  title: string;
}

interface DetailedDropdown<K> extends Dropdown<K> {
  description: string;
  tag: K;
}

const detailedItem: DetailedDropdown<string> = {
  description: '맨날 가고싶당.',
  tag: '여행',
  value: 'jeju',
  title: '제주도',
}

 

DetailedDropdown 인터페이스에서 Dropdown 인터페이스를 상속받았다.

그렇기 때문에 DetailedDropdown 인터페이스에서는 value와 title 값을 갖고 있고,

DetailedDropdown의 제네릭 값을 Dropdown또한 받게 된다.

 

 

타입 단언

 

개발자가 타입스크립트 보다 어떤 변수에 대해 타입을 더 잘알고 있는 상태일 경우 단언하는 것이다.

 

let a;

a = 20;
a = 'a';

let b = a as string;

 

변수 a가 선언만 되었을 땐 any 타입을 가지고 있다.

a에 숫자 20을 대입하여도 아직 any 타입이다.

a에 문자 'a'를 대입하여도 아직 any 타입니다. 

하지만 마지막에 문자 'a'가 대입되었기 때문에 개발자가 변수 a는 string 이라는 것을 알 수 있다.

그 때 'a as string' 처럼 사용하면 타입 단언을 할 수 있다.

 

타입 단언은 보통 DOM API 조작할 때 많이 사용한다.

 

 

위 사진과 같이 document.querySelector를 사용하여 DOM 요소 (위에서는 div)를 가져오고자 할 때 기본 타입은 HTMLDivElement | null 인 것을 알 수 있다. (해당 요소가 없을 가능성이 있기 때문) 

그래서 바로 div 변수에 접근하고자 하면 해당 요소가 null일 수 있기 때문에 경고를 띄워준다.

 

 

그렇기 때문에 옵셔널 체이닝을 사용하던가 if 로 한번 null 체크를 해야 에러가 발생하지 않는다.

하지만 개발자가 현재 HTML문서에서 해당 DOM 요소가 무조건 있다는 것을 보장한다면 

 

 

 

이렇게 타입추론을 통하여 null 체크 없이 바로 사용할 수 있다.