그동안 대여섯개의 포스트를 통해 타입스크립트에서 정의하는 타입들을 알아보았습니다. 이제부터 본격적으로 타입스크립트들이 지원하는 다양한 기능과 문법들에 대해서 알아보도록 하겠습니다.
그리고 그 첫 번째 주자는 타입 추론(Type Inference)입니다.
타입 추론 Type Inference
타입 추론은 변수에 타입이 정의되어있지 않을 때 그 변수의 타입을 추론하는 기능입니다.
let x = 123;
//위 코드에서 x는 number 타입으로 추론됩니다.
//실제 작동은 let x: number = 123;과 동일합니다.타입 추론 방법
Best Common Type
표현식을 통해 타입을 추론하여 가장 근접한 타입으로 추론합니다.
let arr = [0, 1, 'hello'];위 배열에서 배열 요소가 number(0, 1), string('hello')가 존재하고 있으므로 각 요소의 타입과 가장 유사한 타입으로 추론하게 됩니다.
arr: (number | string)[];Contextual Typing
또 다른 추론 방법으로는 코드 문맥을 파악하여 가장 근접한 타입으로 추론하는 것 입니다.
window.onmousedown = function (mouseEvent) {
console.log(mouseEvent.button);
console.log(mouseEvent.kangaroo); //에러
};위 코드에서 타입스크립트는 함수 표현식을 통해서 window.onmousedown에 할당되는 함수의 파라미터 타입을 추론합니다.
여기서 타입 검사기는 오른쪽 할당 함수의 내용을 살펴보면서 해당 함수가 마우스 이벤트와 관련이 있다고 추론합니다. 그래서 button은 받아들이지만 kangaroo는 없는 프로퍼티라고 에러를 내보내게 됩니다.
window.onscroll = function (uiEvent) {
console.log(uiEvent.button); //에러
};이전과 마찬가지로 위 코드에서 함수 파라미터 uiEvent는 UiEvent 타입으로 추론됩니다. 그래서 이전의 MouseEvent와 다르게 UiEvent에는 button 프로퍼티가 존재하지 않는다고 에러를 발생시키게 됩니다.
위 코드를 아래와 같이 수정하면 에러를 발생시키지 않습니다.
const handler = function (uiEvent) {
console.log(uiEvent.button);
};사실 앞과 동작 자체는 동일한 코드입니다. 하지만 할당하려는 변수만을 가지고는 추론에 대한 정보를 얻을 수 없기 때문에 암시적 any 타입으로 추론하게 되고 에러가 발생하지 않는 것 입니다.
타입 추론 예시
변수
변수에 대한 타입 추론은 초기값을 통해 추론됩니다.
let x = 123; //x는 number 타입으로 추론
let y = true; //y는 boolean 타입으로 추론
let z = {
a: '',
b: '',
c: 0,
}; //z는 a, b, c 프로퍼티를 가진 객체 타입으로 추론초깃값을 생략하면 암시적 any 타입으로 추론된다
변수를 선언할 때 초기값을 통해서 타입 추론을 한다고 했습니다. 만약 초기값을 생략하면 어떤 타입이 될까요?
초기값을 생략하게 되면 해당 변수의 타입은 암시적 any 타입으로 추론됩니다. 그리고 이후에 해당 변수에 어떤 값이 할당되면 그때 할당된 값의 타입으로 바뀌게됩니다.
let x; // 암시적 any 타입으로 추론
x = 123; //number 타입으로 추론
x = 'hi'; //string 타입으로 추론
x = true; //boolean 타입으로 추론상수 추론
const를 통해 선언된 상수도 타입 추론이 이루어집니다.
하지만 이 경우에는 let 명령을 통한 변수와는 조금 다른 방식으로 추론됩니다.
const X = 123; //number 리터럴 타입으로 추론
const Y = 'A'; //string 리터럴 타입으로 추론const 상수는 값이 불변하기 때문에 추론을 할 때 일반적인 number, string보다 더 좁은 범위를 갖는 타입으로 추론됩니다.
함수
함수의 매개변수는 위에서 언급한 Best Common Type, Contextual Typing을 통해 이루어집니다.
함수 반환값
함수의 반환값 타입은 return 문의 코드를 통해 타입이 추론됩니다.
const foo = () => {
return 123;
}; //이 함수의 반환값 타입은 number 타입으로 추론기본값 매개변수
매개변수에 기본값이 할당되었을 경우에는 기본값의 타입을 따라 추론됩니다.
const foo = (n = 123) => {
return n;
}; //이 함수의 매개변수 타입은 number 타입으로 추론구조 분해 할당
구조 분해 할당문법에서도 타입 추론이 이루어집니다.
let [elem1, elem2, elem3] = [1, 'apple', true];
//elem1: number, elem2: string, elem3: boolean
let { prop1, prop2, prop3 } = obj;
//obj 프로퍼티 타입 따라감