✨ 타입 추론
타입스크립트가 코드를 해석하는 동작을 말한다.
👇 예를 들어 x에 3이라는 값을 할당하는 코드를 보자.
let x = 3; // let x: number직접 타입을 지정하지 않았지만, 타입이 추론되어 number로 해석되는 것을 확인할 수 있다.
변수 뿐만 아니라 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 발생한다.
Best Common Type
타입스크립트에서 타입은 몇 개의 표현식(코드)를 바탕으로 추론하고, 그 표현식을 사용해 가장 근접한 타입을 추론하는 것을 말한다.
👇 어떤 배열에 0, 1, null을 할당해보자.
let arr = [0, 1, null]; // let arr: number[]타입스크립트는 배열의 타입을 추론하기 위해서 각 아이템을 살펴본다.
이 때, Best Common Type 알고리즘으로 다른 타입들과 잘 호환되는 타입을 선정하여 추론하기에 arr을 number[ ]의 타입으로 추론하게 된다.
Contextual Typeing
문맥상으로 타입을 결정하는 것이다.
문맥이란 👉 코드의 위치를 말한다.
👇 예제 코드를 살펴보자.
window.onmousedown = function(mouseEvent) {
console.log(mouseEvent.button); //<- OK
console.log(mouseEvent.dance); //<- Error!
};타입스크립트의 타입 검사는 window.onmousedown 함수 타입을 사용해 할당 오른쪽에 나타난 함수 표현식의 타입을 추론한다.
여기서, mouseEvent 매개변수 타입에서 button 프로퍼티는 있지만, dance 프로퍼티는 존재하지 않음을 추론할 수 있게 된다.
👇 또 다른 예제 코드이다.
window.onscroll = function(uiEvent) {
console.log(uiEvent.button); //<- Error!
};오른쪽의 함수가 window.onscroll에 할당되었기에 uiEvent를 UIEvent로 여긴다. 앞의 예제에서는 MouseEvent로 여겼기에 button 속성을 추론하였지만, 여기에서는 그렇지 못한다.
👇 이를 해결하면 다음과 같다.
const handler = function(uiEvent){
console.log(uiEvent.button);
}오른쪽의 함수를 할당하는 위치를 변수로 바꾸면 타입 추정이 어렵기에 에러를 잡아내지 못한다.
문맥상 타이핑은 일반적인 경우 함수 호출 인수, 할당의 오른쪽, 타입 단언, 객체/배열 리터럴의 멤버, 반환문에 적용된다.
최적 공통 타입의 후보 타입
function createDancer(): Dancer[]{
return [new Beginner(), new Intermediate(), new Advanced()]
}여기에서 최적 공통 타입은 Dancer, Beginner, Intermediate, Advanced의 후보가 있으며, Dancer가 최적 공통 알고리즘에 의해 선택된다.
🤔 이렇게 자동으로 타입을 지정해주는 방식이 과연 간편한 타입 추론일까?
물론, 타입스크립트가 자동으로 타입을 명시해주지만, 간단한 프로그램을 짜는 것이 아니기 때문에 타입을 정확하게 명시하는 것을 반드시 진행하도록 해야한다.
📚 학습할 때, 참고한 자료 📚
