타입스크립트의 가장 중요한 역할은 타입 시스템에 있습니다. 타입스크립트는 단독으로 실행할 수 있는 타입스크립트 서버(tsserver)를 사용하며, 언어서비스를 제공합니다.
num
변수의 타입을 number
라고 직접 지정하지는 않았지만, 타입스크립트는 10
이라는 값을 보고 그 타입을 알아냅니다.
반환 타입을 명시하지 않았지만, number
로 추론하고 있습니다.
만약 타입이 기대한 것과 다르다면 타입 선언을 직접 명시하고, 문제점을 파악해야할 것 입니다.
message
값이 조건문 외부에서는 String
또는 null
타입이겠지만, 조건문 내부에서는 String
이라고만 추론합니다.
x
가 튜플타입([number, number, number]
) 이어야 한다면, 타입 구문을 명시해야합니다.
만약 길게 체이닝된 메서드 호출에서 추론 정보는 디버깅하는데 꼭 필요한 존재입니다.
아래 코드의 경우 타입이 HTMLElement
로 반환되는 것을 기대하고 있습니다.
function getElement(elOrId: string | HTMLElement | null): HTMLElement {
// const a = typeof null
// null이 object 이기도 하기 때문에 return 값이 에러가 뜬다.
if (typeof elOrId === 'object') {
return elOrId
// ~~~~~~~~~~~~~~ 'HTMLElement | null' is not assignable to 'HTMLElement'
} else if (elOrId === null) {
return document.body
} else {
const el = document.getElementById(elOrId)
return el
// ~~~~~~~~~~ 'HTMLElement | null' is not assignable to 'HTMLElement'
}
}
하지만 return elOrId
과 return el
에서 에러가 발생할 것입니다.
위에서 확인할 수 있 듯이 null
값도 object
타입으로 return elOrId
에서 null
이 반환할 수 있기 때문입니다.
const el = document.getElementById(elOrId)
값 역시도 null
값이 있을 수도 있기 때문에 return el
에서도 에러가 발생된 것 입니다.
코드 내 fetch
함수가 호출되고, 이 함수에 대해서 좀 더 알아본다고 가정해봅시다.
마우스를 fetch
위에 되게되면 타입을 확인할 수 있으며, 'Go to Definition(정의로 이동)
' 옵션을 확인하거나, 'F12
' 또는 'Ctrl
+ 마우스클릭'을 하게 되면 타입스크립트에 포함되어 있는 DOM 타입 선언인 lib.dom.d.ts
로 이동합니다.
declare function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
RequestInfo
과 RequestInit
타입으로 명시되어 있으며, 위와 동일한 방법으로 타입 확인을 할 수 있습니다.