⭐️ Type Inference
✅ 타입추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다.
타입스크립트는 아래와 같이 x에 대한 타입을 지정하지 않더라도 number라고 간주한다. 이와 같이 변수를 선언하거나 초기화할 때 타입이 추론된다.
이외에도 변수, 속성, 인자의 기본값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다.
1️⃣ 함수의 반환값에 대한 타입추론
JS문법에서는 number와 string의 연산은 string을 출력하게 한다.
아래의 함수의 경우 반환값에 대한 타입을 string으로 지정하지 않았지만, 10 + 'hi' = '10hi'
✅ 즉, string 값을 반환할 것이라고 추론하고 있다.
2️⃣ Interface,Generic을 이용한 타입추론
✅ Dropdown<string>에 대해서는 제네릭이되겠지만 그 뒤에 들어오는 value가 string이라는 것이 바로 타입 추론이다.
Dropdown<string>.value: stringshoppingItem의 타입을 Dropdown이라는 타입으로 선언과 함께 제네릭에 string타입을 전달하고 그에 따라 value의 타입이 string으로 전해지지만, 타입추론에 의해서 shoppingItem 객체 안에 value를 작성할 때 string이라고 추론된 것을 확인할 수 있다.
3️⃣ 복잡한 구조에서의 타입 추론 방식
✅ 만약 number를 타입으로 넘긴다면 DetailDropdown 인터페이스의 tag와 상속받아온 Dropdown 인퍼테이스의 value에 타입이 전달된다.
이때 바로 코드에 value, tag가 number가 아닌 string으로 작성되었다고 Error를 발생시키는 것도 타입추론이라고 할 수 있다.
4️⃣ Best Common Type
타입은 보통 몇개의 코드(표현식)을 바탕으로 타입을 추론한다. 그리고 그 표현식을 이용하여 가장 근접한 타입을 추론하는데, 이 가장 근접한 타입을 Best Common Type이라고 한다.
아래와 같이 arr의 타입을 추론하기 위해서는 배열의 내부를 살핀다. 이때 Best Common Type 알고리즘으로 다른 타입들과 가장 잘 호환되는 타입을 선정하게 되고 number와 null을
union type으로 구분하여 추론한다.
5️⃣ Contextual Typing
타입스크립트에서 타입을 추론하는 또 하나의 방식은 바로 문맥상으로 타입을 결정하는 것이다.
✅ 문맥상의 타이핑은 코드의 위치(문맥)를 기준으로 일어난다.
✏️ Example 1
타입스크립트 검사기 관점에서 보면 window.onmousedown에 할당되는 함수의 타입을 추론하기 위해 window.onmousedown 타입을 검사한다.
타입 검사가 끝나고 나면 함수의 타입이 마우스 이벤트와 연관이 있다고 추론하기 때문에 mouseEvent 인자에 button 속성은 있지만 kangaroo 속성은 없다고 결론을 내린다.
✏️ Example 2
앞의 예제와 마찬가지로 오른쪽의 함수는 window.onscroll에 할당되었기 때문에 함수의 인자 uiEvent는 UIEvent으로 간주된다.
그래서 앞에서 봤던 MouseEvent와는 다르게 button 속성이 없다고 추론한다. 그러므로 uiEvent.button에서 Error가 발생한다.
💡 알고 가자) 👉 타입스크립트의 타입 체킹
타입 체킹에 있어서 타입스크립트의 지향점은 타입 체크는 값의 형태에 기반하여 이루어져야 한다는 점이다.
이 것을 Duck Typing 또는 Structural Subtyping 이라고 한다.
Duck Typing : 객체의 변수 및 메서드의 집합이 객체의 타입을 결정하는 것을 의미. 동적 타이핑의 한 종류
Structural Subtyping : 객체의 실제 구조나 정의에 따라 타입을 결정하는 것을 의미
⭐️ Type Assertion
타입스크립트 컴파일러는 타입 표기, 타입 좁히기와 타입 추론 등의 기법을 이용해 값의 타입을 판단한다.
하지만 때로는 컴파일러가 가진 정보를 무시하고 프로그래머가 원하는 임의의 타입을 값에 할당하고 싶을 수 있다.
✅ 이럴 때 필요한 것이 바로 타입 단언이다.
아래의 경우 타입스크립트 컴파일러가 타입추론을 하지 못하는 경우이다. a에 number, string을 대입하면서 b는 어떤 타입으로 지정해줘야 하는지 모르기 때문이다.
let a; // let a:any
a = 10;
a = 'abc'
let b = a // let b:any;이때, 프로그래머가 as를 사용해서 최종적으로 어떤 타입을 사용할 것인지 단언하는 것이다.
let b = a as string; 💡 잠깐) 활용사례
✅ 타입 단언은 주로 DOM API를 조작할 때 많이 사용.
div가 어떤 타입을 가지는지 추론한다.
하지만,
HTMLDivElement일지 null일지 정확히 알 수 없으므로innerText라는 기능을 사용하려하면 Error를 발생시킨다.
👍 따라서
as를 통해서 div는HTMLDivElement타입을 갖는다고 단언해주면 DOM API를 사용할 수 있게 된다.
참조 및 참고하기 좋은 사이트
