타입스크립트 (3) - 타입의 추론. 타입은 어떻게 추론될까?

타입스크립트는 명시적으로 타입을 지정해줄 수도 있지만 지정을 안해줄 경우 자동으로 타입을 추론한다.

어떻게 추론될까?

 

---

 

let 과 const의 타입 추론

---

변수의 초깃값으로 추론이 된다.

let a = 'Mark' // string
const b = 'Mark' // 'Mark' => literal type

let c = 38 // number
const d = 38 // 38 => literal type

let g = ['Mark', 'Pen'] // string[]
const h = ['Mark', 'Pen'] // string[]
const i = ['Mark', 'Pen'] as const // readonly ['Mark', 'Pen']

 

 

Best Common Type

---

타입스크립트는 타입 추론을 할 때 최선의 방식으로 추론한다.

let j = [0, 1, null] // (number | null) []
const j = [0, 1, null] // (number | null) []

 

-> number와 null을 포함시켜 배열을 선언하면 자동으로 (number | null) 타입으로 추론되는 것을 확인할 수 있다.

 

 

 

Contextual Typing

---

타입스크립트는 코드의 위치에 따라 다른 추론을 할 수 있다.

const click = (e) => {
  e; // any
}

document.addEventListener('click', (e) => {
  e; //MouseEvent
})

 

 

 

리터럴 추론

---

 

객체를 사용하여 변수를 초기화할 경우에 객체 프로퍼티는 이후에 값이 변화할 수 있다고 가정한다.

객체 리터럴 추론의 예시는 아래와 같다.

// (handleRequest는 url: string, method: "GET" | "POST")로 선언되었음

const req = { url: "https://example.com", method: "GET"};
handleRequest(req.url, req.method);

위 코드의 경우, string 타입은 "GET" | "POST"의 타입으로 할당될 수 없다고 나온다. 
method는 값이 변할 수 있는 string 타입으로 되었다고 판단되었기 때문이다.

 

그렇다면 객체의 리터럴 추론을 어떻게 보다 명확하게 할 수 있을까?

 

1) Type Assertion 사용 (타입 단언)

const req = { url: "https://example.com", method: "GET" as "GET" };
// 컴파일러에게 method의 타입이 "GET" 타입이라고 알려주는 것과 같습니다.

 

2) 객체 전체를 리터럴 타입으로 변환

const req = { url: "https://example.com", method: "GET" as "GET" };
// 컴파일러에게 method의 타입이 "GET" 타입이라고 알려주는 것과 같습니다.

 

---

 

타입의 추론을 간략하게 정리해두었다.

다음 포스팅에는 타입 가드를 어떻게 사용하는지 기록해 두고자 한다.