복잡한 구조의 타입 추론과 타입 단언

1. 복잡한 구조의 타입 추론

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

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

let detailedItem: DetailedDropdown<number> = {
	title: 'abc',
	description: 'abc',
	value: 1,
	tag: 1,
};

• 인터페이스를 2개를 이용해서 제네릭을 연결했을 때도 타입 추론 동작함
• 제네릭을 이용해서 타입을 정의했을 때도 타입을 추론함
• 제네릭의 타입이 확장을 하는 인터페이스와 확장이 된 인터페이스 모두 적용됨
• 제네릭 타입에 의해서 변동이 있는 타입들은 모두 변동이 생김
• 타입 추론방식은 어떤 코드를 작성하고 저장할 때마다 즉각적으로 Typescript Laguage Server에 의해서 추론이 되고, 그 값들의 타입이 맞고 틀림을 코드 상에서 나타내 줄 수 있음
  
  

2. 타입 단언 (Type Assertion)

let a;
a = 20;
a = 'a';

let b = a; // any
let c = a as string; // string

• 변수에 또 다른 변수를 할당했을 때 변수에 타입에 따라 타입이 추론됨
• 하지만 변수의 타입이 계속 바뀐 뒤 할당되었을 때 타입추론 방식으로는 코드 추적과 추론을 할 수 없음
• 따라서 결과적으로 맨 처음에 선언된 타입을 변수에 할당하고, 그 변수는 처음 선언된 타입이 됨
• as 키워드를 사용하고 뒤에 타입을 넣어주면, 해당 타입으로 변경됨
• 타입스크립트보다 개발자가 더 타입을 잘 알고 있을 때, 개발자가 정의한 타입으로 간주하게끔 하는 것
  
  

let div1 = document.querySelector('div'); // HTMLDivElement | null
if (div1) {
	div1.innerText;
}

let div2 = document.querySelector('div') as HTMLDivElement; // HTMLDivElement
div2.innerText;

• 타입 단언의 실제 사례는 DOM API 조작할 때 가장 많이 사용
• DOM API로 접근할 때, 접근하는 시점에 해당 엘리먼트가 있다는 보장을 해주지 않기 때문에 해당 엘리먼트가 있는지 확인을 한번 하고 API 조작을 하는게 일반적인 패턴
• null 일 수도 있다고 타입추론을 하기 때문에 null 이 아닌 것을 보장을 해주고 접근해야 함
• as 키워드를 사용하고 해당 엘리먼트의 타입을 단언하면 바로 API 조작 가능
  
  

참고 : 타입스크립트 입문 - 기초부터 실전까지