[Typescript] 23장 타입 추론

✅ 1. 최적 공통 타입 (Best Common Type)

여러 개의 값이 썪여 있을 때, 타입스크립트는 모든 값을 포함할 수 있는 가장 넓은 타입을 찾습니다. 

let arr = [1, 2, 3]; // number[]로 추론
console.log(arr);

let mixed = [1, 'two'];
console.log(mixed);
// (string | number)[] 로 추론

let mixed2 = [1, true, 'str'];
// (string | number | boolean)[] 로 추론

 

💡특징 

• 배열, 객체 리터럴 등에서 자주 나타남
• 하나라도 타입이 다르면 Union(유니온) 타입으로 추론
• 만약 타입을 결정할 수 없으면 any

🍎 Any 일 경우 

let weird = [1, () => {}, 'text'];
// any[] (함수 타입가 숫자, 문자열의 공통 타입을 찾을 수 X -> any)

---

✅ 2. 문맥상 타이핑 (Contextual Typing)

타입스크립트는 변수가 사용되는 위치를 보고 타입을 유추기도 하며, 즉  '이곳에 이 타입이 들어와야 한다'는 문맥을 기반으로 추론합니다. 

• ex.1) - 이벤트 핸들러

window.addEventListener('click', (e) => {
  // e: MouseEvent로 추론
  console.log(e.clientX);
});

 

여기서 (e)의 타입을 안 적어도 되는 이유는 "click" 이벤트의 핸들러에는 MouseEvent가 온다고 DOM 타입 정의에 이미 써있기 때문에 타입을 적지 않아도 됩니다.

• ex.2) - 콜백 함수

const nums = [1, 2, 3];

nums.forEach((n) => {
  // n: number 로 추론
  console.log(n.toFixed);
});

 

forEach가 받는 콜백의 인자는 number라는 것을 문맥상 알 수 있어 자동으로 추론됩니다.

• ex.3) - 객체 리터럴

type Point = { x: number; y: number };

let p: Point = {
  x: 10,
  y: 20,
}; // p.x, p.y 모두 number로 추론

---

✅ 정리

구분	설명	예시
최적 공통 타입	여러 값 중 공통되는 가장 넓은 타입을 찾음	[1, "a"] -> (string | number)[]
문맥상 타이핑	변수가 사용되는 위치를 보고 타입을 추론	addEventListener("click", e => e.clientX)

---

 

 

GitHub - Koras02/typescript-bloging