[TypeScript] 타입 추론 이해하기

# let 과 const의 타입추론 (+ as const) 

• let 과 const로 정의될 때 타입추론에 대한 차이가 있음 

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

let c = 38; // number
const d= 28 // 28 => litetal type

let e= false; // boolean
const f = false // false => literal type

let g = ['Mark', 'haeun'] // string[]
const h = ['Mark', 'haeun'] // string[]

const i = ['Mark', 'haeun', 'bokdong'] as const // readonly ['Mark', 'haeun', 'bokdong']

 

 

# Best common type

• 가장 공통적인 타입을 추론해낸다
• 밑의 예시에서 각각의 argument가 정확하게 정의되길 원한다면 위에서 본 as const를 사용해주면 된다.

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

• 부모 class가 있고 자식 class가 있을 때는 각각의 자식 class가 union 타입으로 정의된다.
• 부모의 타입으로 타입을 만들고 싶으면 정확히 정의를 해주거나 부모class가 그 배열 안에 같이 있으면 된다.

class Animal {}
class Rhino extends Animal {}
class Elephant extends Animal {}
class Snake extends Animal {}

let i = [new Rhino(), new Elephant(), new Snake()] // (Rhino | Elephant | Snake)[]
const m =[new Rhino(), new Elephant(), new Snake()] // (Rhino | Elephant | Snake)[]

//부모클래스가 같이 들어감
const n = [mew Animal(), new Rhino(), new Elephant(), new Snake()] // (Animal)[]
//정확히 부모클래스로 타입지정
const o: Animal[] = [new Rhino(), new Elephant(), new Snake()] // (Animal)[]

 

 

#Contextual Typing 

• 위치에 따라 추론이 다르다
• 아래의 예시를 보면, 타입스크립트가 window.onmousedown 의 함수 유형을 추론한다. 그래서 button 속성은 가지고 있지만 kangaroo속성은 가지고 있지 않다는걸 유추해낼 수 있다. 

window.onmousedown = function (mouseEvent) {
  console.log(mouseEvent.button);
  console.log(mouseEvent.kangaroo); //Property 'kangaroo' does not exist on type 'MouseEvent'.
};