Skip to main content

Command Palette

Search for a command to run...

타입 추론하기

Published
2 min read
타입 추론하기
W

안녕하세요! 프론트엔드 개발자 woodstock입니다.

저는 매일 조금씩 발전하고자 하는 마음으로 개발공부를 시작했고, 이 블로그는 그 과정에서 배우고 성장하는 이야기를 담고 있습니다.

여러분의 피드백과 조언은 언제나 환영합니다! 함께 배우고 성장하는 과정을 즐길 수 있기를 기대합니다.

타입 추론이란

타입스크립트는 타입이 정의되어 있지 않는 변수의 타입을 자동으로 추론하는데, 이런 기능을 타입 추론이라고 한다.

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

예를들면, 다음과 같이 함수의 매개변수 타입은 자동으로 추론할 수 없다.

이렇게 타입 추론이 불가능한 변수에는 암묵적으로 any타입이 추론되는데 만약 엄격한 타입 검사 모드(tsconfig.json의 strict 옵션을 true로 설정)라면, 이러한 암시적 any타입의 추론을 오류로 판단하게 된다.

타입 추론이 가능한 상황들

1. 변수 선언

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

let a = 10;
let b = "hello";
let c = {
  id: 1,
  name: "woodstock",
  profile: {
    nickname: "woody",
  },
  urls: ["https://velog.io/@orodae"],
};


2. 구조 분해 할당

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

let c = {
  id: 1,
  name: "woodstock",
  profile: {
    nickname: "woody",
  },
  urls: ["https://velog.io/@orodae"],
};

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타입이 해당 값의 타입으로 변화한다.


2. const 상수의 추론

const로 선언된 상수도 타입 추론이 진행된다. 그러나 let으로 선언한 변수와는 다른 방식으로 추론된다.


최적 공통 타입(Best Common Type)

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

More from this blog

💥 new Array(length).map()으로 배열 초기화 시 콜백이 실행되지 않는 문제

JavaScript에서 배열을 초기화하려고 new Array(4).map(() => [])을 사용했는데 의도대로 동작하지 않았다. 원인을 찾아보니 JavaScript의 빈 슬롯과 undefined의 차이, 그리고 map() 메서드가 빈 슬롯에 대해 콜백을 실행하지 않는다는 특성때문이었다. 문제 상황 특정 크기의 배열을 만들고 각 요소를 []로 초기화 하려고 했다. const result = new Array(4).map(() => []); co...

Jun 28, 20252 min read13

💥 에러 메시지와 스택 트레이스 분석을 통해 문제 해결하기

JavaScript로 카드 게임 로직을 구현하던 중 TypeError: Cannot read properties of undefined라는 에러를 만났다. 코드가 복잡하고 짐작가는 부분이 단번에 떠오르지 않아 막막했는데, 에러 메세지와 스택 트레이스를 차근차근 분석해가며 원인을 찾아낸 과정을 기록해본다. 에러 발생 게임 로직을 테스트하던 중 특정 입력에서 다음과 같은 에러가 발생했다. TypeError: Cannot read properties...

Jun 25, 20254 min read11

🧐 적절한 함수명과 단일 책임으로 코드 개선하기

이 글에서는 JavaScript로 구현된 보드게임의 로직을 개선하는 과정을 다루며, 개선 과정은 함수명 개선 → 중복 제거 → 책임 분리의 단계로 이루어져있다. 작동하지만 개선이 필요한 코드 처음에 작성한 코드는 기능적으로는 문제없이 동작했지만, 더 나은 방식을 고민하다 보니 여러 개선점을 찾을 수 있었다. function checkLadder(position) { switch (position) { case 4: return 14;...

Jun 23, 20253 min read19

작심삼십일 - TypeScript 강의를 완강하다.

유데미 작심삼십일 챌린지에 참여하다 작심삼십일 챌린지는 유데미의 한국 런칭 3주년을 기념한 이벤트 중 하나로, 30일 동안 유데미 강의를 들으며 인증을 하는 챌린지이다.취업 준비를 하면서 여러가지 요인으로(주로 심리적이지만..) 학습 루틴이 망가졌던 찰나에 이 이벤트를 보게되었고, 마침 기존에 사두고 볼 엄두가 안 났던 타입스크립트 강의가 있었기에 옳다구나! 하고 신청했었다. 챌린지를 통해 무엇을 배웠나? 챌린지의 목표로 정한 강의는 유데미에...

Nov 18, 20242 min read54
작심삼십일 - TypeScript 강의를 완강하다.

woodstock's devlog

215 posts

안녕하세요! 프론트엔드 개발자 woodstock입니다.

제 블로그에서는 프론트엔드 개발에 대한 다양한 주제를 다룹니다.

JavaScript, TypeScript, React, Next.js 등의 기술을 활용하여 실제 프로젝트를 진행하면서 얻은 경험과 지식을 공유하고자 하며, 컴퓨터 과학(CS)의 기본 개념과 알고리즘, 자료구조 등에 대해서도 다룹니다.