12장 타입스크립트 타입추론(Type Inference)

📚 타입추론(Type Inference)

타입추론(Type Inference) 이란 타입스크립트가 코드를 해석하여 적절한 타입을 정의하는 동작을 의미한다.

쉽게 말하면 타입을 지정하지 않더라도 자동으로 타입을 결정해준다.

 

타입추론의 장점은 코드 수동으로 명시해야 하는 구문의 수를 줄여주기 때문에, 코드의 전체적인 안정성이 향상된다.

타입추론이 어떤 과정을 거치는지, 언제 타입선언을 해야할 지를 알면 불필요한 타입선언을 줄일 수 있기 때문에 잘 알아두자! 😉

 

📌 변수의 타입 추론

let x = 10; // x는 number 타입으로 추론됩니다.

변수는 선언될 때 초기값에 따라서 타입이 추론된다.

a라는 변수가 선언될 시점에 값이 할당되지 않아 어떤 값이 들어올지 모르기 때문에, any라고 추론하고 있다.

선언 이후에 다시 값을 할당해도 여전히 any라고 추론하는 이유는 타입스크립트는 한줄씩 해석하기 때문.

 

📌 함수의 타입 추론

function add(a, b) {
  return a + b; // a와 b의 타입을 추론해보려고 시도합니다.
}

함수를 정의할 때 매개변수와 반환 값의 타입을 명시하지 않은 경우, TypeScript는 함수 내에서 사용된 값들을 기반으로 매개변수와 반환 값의 타입을 추론한다.

 

📌 배열과 객체 리터럴 타입 추론

배열과 객체 리터럴에서 사용된 값들을 기반으로 배열 요소와 객체 프로퍼티의 타입을 추론한다.

const numbers = [1, 2, 3]; // numbers 배열의 요소는 number 타입으로 추론됩니다.
const person = { name: "Alice", age: 30 }; // person 객체의 프로퍼티는 string과 number 타입으로 추론됩니다.

 

📌 인터페이스와 제네릭의 추론 방식

인터페이스에 제네릭을 사용할 때도 내부에서 타입을 사용하는 방식을 기반으로 변수와 값의 타입을 추론합니다.

interface Dropdown<T> {
  title: string;
  value: T;
}

let shoppingItem: Dropdown<number> = {
  title: "Item",  // 자동으로 타입이 추론된다.
  value: 1, // 자동으로 타입이 추론된다.
}

 

📌 복잡한 구조에서 타입추론 방식

interface Dropdown<T> {
  title: string;
  value: T;
}

interface DetailedDropdown<K> extends Dropdown<K> {
  tag: string;
  description: string;
}

let shoppingDetailItem: DetailedDropdown<number> = {
  
}

shoppingDetailItem 변수의 타입을 Dropdown 인터페이스를 상속받은 DetailedDropdown 인터페이스로 정의하고 있다.

shoppingDetailItem에서 코드완성 미리보기를 보면 Dropdown 인터페이스의 속성 타입까지 number로 지정된 걸 알 수 있다.

 

DetailedDropdown 인터페이스에 넘긴 제네릭 타입이 Dropdown 인터페이스의 제네릭 타입으로 전달됐기 때문.

 

복잡한 구조여도 타입스크립트는 내부적으로 해당 타입들을 올바르게 추론해주고 있는 것이다. 😁👍