티스토리 뷰

타입 추론

타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론하는 타입스크립트의 기능

타입스크립트는 모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공하지만 모든 상황에 타입을 잘 추론하는 것은 아니다.

function func(param){ // 오류

}

 

함수의 매개변수 타입은 자동으로 추론이 불가능하다.

 

🥨 타입 추론이 가능한 상황

1. 변수 선언

일반적인 변수 선언의 경우 초기값을 기준으로 타입이 추론된다.

// 변수의 초기값으로 타입을 추론
let a = 10;
let b = "hello";
let c = {
    id:1,
    name: "기지",
    profile: {
        nickname: "kiji",
    },
    urls:["https://kimkiji.com"],
};

 

2. 구조 분해 할당

객체와 배열을 구조 분해 할당하는 상황에서도 타입이 추론된다.

let {id, name, profile} = c;
// 구조 분해 할당의 경우에도 타입 추론이 가능
let [one, two, three] = [1, "hello", true];

 

 

3. 함수의 반환값

함수 반환값의 타입은 return 문을 기준으로 추론된다.

// 함수의 반환값 타입 추론도 가능
function func(){
    return "hello";
};

 

 

4. 기본값이 설정된 매개변수

기본값이 설정된 매개변수의 타입은 기본값을 기준으로 추론된다.

function func(message = "hello") {
  return "hello";
}

 

 


🥨 주의해야 할 상황

1. 임시적으로 any 타입으로 추론

변수를 선언할 때 초기값을 생략하면 암시적인 any 타입으로 추론된다.

매개변수의 타입이 암시적으로 any로 추론될 때와 달리 변수의 타입이 암시적 any 타입으로 추론되는 상황은 오류로 판단하지 않는다.

let d;
d = 10; // 값을 할당하고 나면 타입 추론이 됨
d.toFixed();

// 다른 타입의 값을 할당할 수 있음
d = "hello"; // 이 때의 변수 d는 string 타입으로 추론
d.toUpperCase();

암시적으로 any타입으로 추론된 변수는 값이 할당되면 그 다음 라인부터 해당 값의 타입으로 변화한다.

 

이렇게 암시적으로 추론된 any타입은 코드의 흐름에 따라 타입이 계속 변화한다.

이를  any의 진화 라고 표현한다.

 

 

2. const 상수의 추론

const로 선언된 상수도 타입 추론이 진행된다.

그러나 let으로 선언한 변수와는 다른 방식으로 추론된다.

const num = 10;
// 10 Number Literal 타입으로 추론

const str = "hello";
// "hello" String Literal 타입으로 추론

이는 상수는 초기화 때 설정한 값을 변경할 수 없기 때문에 특별히 가장 좁은 타입으로 추론되기 때문이다.

 

let으로 선언된 변수의 경우 const로 선언된 상수와는 다르게 조금 더 범용적인 타입으로 추론을 하기 때문에 타입을 넓혀서 범용적으로 변수를 사용할 수 있다.

 


🥨 최적 공통 타입(Best Common Type)

다양한 타입의 요소를 담은 배열을 변수의 초기값으로 설정하면, 최적의 공통 타입으로 추론된다.

let arr = [1, "string"]; // number 타입과 string 타입이 혼합된 유니온 타입으로 추론됨

 


🔗 타입스크립트 강의

 

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다., 프론트엔드의 피할 수

www.inflearn.com

 

728x90