Dev

Feb 2, 2026

마지막 업데이트 Mar 30, 2026

TypeScript 입문 가이드: JavaScript 개발자가 처음 배울 것

TypeScript는 빨리 만들고 싶은 시점에 오히려 더 어렵게 느껴지는 경우가 많습니다.

하지만 처음부터 고급 타입 기법을 알아야 하는 것은 아닙니다. 실제로는 경계, inference, 불확실한 데이터 처리 같은 기본 습관에서 대부분의 이득이 나옵니다.

이 글은 모든 기능을 훑는 입문서가 아니라, JavaScript 개발자가 실무에서 가장 빨리 효과를 보는 시작 순서를 정리한 가이드입니다.

왜 TypeScript가 실무에서 도움이 될까

TypeScript의 핵심은 코드를 더 많이 쓰게 만드는 것이 아니라, 런타임 버그가 되기 전에 불일치를 미리 잡는 데 있습니다.

특히 이런 상황에서 가치가 커집니다.

여러 사람이 같은 코드베이스를 함께 수정할 때
API 응답 형태가 시간이 지나며 바뀔 때
컴포넌트와 유틸이 여러 곳에서 재사용될 때
리팩터링을 더 덜 무섭게 하고 싶을 때

가장 큰 이득은 보통 “화려한 타입”보다 “경계”에서 나옵니다.

처음엔 이 네 가지만 먼저 배우기

처음 시작할 때 가장 효율이 좋은 주제는 이 네 가지입니다.

any와 unknown의 차이
명확한 로컬 값에서의 inference
함수 입력과 반환 타입
불확실한 데이터를 좁히는 narrowing

이 네 가지가 잡히면 그다음 기능은 훨씬 쉽게 들어옵니다.

`any`와 `unknown`부터 구분하기

any는 타입 안전성을 사실상 꺼버립니다. 반면 unknown은 그 값이 무엇인지 확인하기 전까지 함부로 쓰지 못하게 만듭니다.

그래서 unknown은 이런 경우에 더 안전합니다.

API 응답
폼 입력값
외부 라이브러리 결과
런타임에서 들어오는 불확실한 데이터

초보자가 가장 많이 하는 실수는 any로 경고를 없애고, 결국 TypeScript의 보호를 잃어버리는 것입니다.

명확한 로컬 값은 inference를 믿기

모든 변수에 타입을 직접 붙일 필요는 없습니다.

const count = 0;
const label = 'hello';
const enabled = true;

이런 단순한 로컬 값은 TypeScript가 이미 잘 추론합니다. 직접 타입을 적는 것은 공유 타입이나 함수 경계에서 더 가치가 큽니다.

과한 타입 표기는 코드만 시끄럽게 만들 수 있습니다.

함수 경계부터 타입 잡기

가장 빨리 효과를 보려면 내부 구현보다 경계부터 타입을 붙이는 편이 좋습니다.

함수 파라미터
반환값
컴포넌트 props
API 요청과 응답
공유 도메인 객체

이렇게 하면 모든 지역 변수를 일일이 타입 붙이지 않아도 품질이 크게 올라갑니다.

고급 generics보다 narrowing 먼저 익히기

실무에서는 복잡한 타입 기법보다 narrowing이 훨씬 자주 쓰입니다.

대표 도구:

typeof
in
null 체크
간단한 custom type guard

예를 들면:

function printLength(value: unknown) {
  if (typeof value === 'string') {
    console.log(value.length);
  }
}

이런 패턴이 초반에는 고급 conditional type보다 훨씬 더 중요합니다.

점진적 마이그레이션 순서

JavaScript에서 넘어올 때는 전체를 한 번에 바꾸기보다 이런 순서가 보통 더 쉽습니다.

작은 유틸 파일과 공유 타입부터 변환
API 요청/응답 경계에 타입 추가
재사용이 많은 모듈의 any 줄이기
데이터 흐름이 안정된 뒤 컴포넌트 props 정리

이 순서가 프로젝트 전체를 “타입 변환 작업”으로 만들지 않으면서도 효과를 줍니다.

외부 데이터에 대한 좋은 시작 패턴

초보자에게 가장 좋은 습관은 외부 데이터를 “증명 전까지는 불확실하다”고 보는 것입니다.

type User = {
  id: string;
  name: string;
};

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value
  );
}

처음부터 완벽한 런타임 검증 체계를 만들 필요는 없지만, 최소한 외부 데이터를 바로 깊게 신뢰하지 않는 습관은 매우 중요합니다.

초보자가 자주 하는 실수

1. 불확실한 값을 전부 `any`로 덮기

이러면 TypeScript를 쓰는 가장 큰 이유가 사라집니다.

2. 너무 많은 명시적 타입 쓰기

inference가 이미 아는 답까지 전부 적으면 코드만 복잡해집니다.

3. 고급 generics를 너무 일찍 파기

일반적인 앱 개발은 고급 타입 기법 없이도 충분히 안전하게 만들 수 있습니다.

4. 빨간 줄을 적으로 보기

대부분은 나중에 실제 버그가 될 불일치를 미리 알려주는 신호입니다.

5. 프로젝트 전체를 한 번에 마이그레이션하기

점진적으로 옮기는 편이 훨씬 안전하고 유지보수도 쉽습니다.

오래 가는 사고방식

TypeScript를 “신뢰 경계를 설명하는 도구”로 보면 이해가 쉬워집니다.

어떤 값은 이미 알고 있다
어떤 값은 아직 확실하지 않다
어떤 함수는 무엇을 받겠다고 약속한다
어떤 함수는 무엇을 돌려주겠다고 약속한다

이 사고방식이 문법 암기보다 훨씬 오래 갑니다.

처음엔 굳이 깊게 안 봐도 되는 것

초반에는 이런 주제를 바로 마스터할 필요가 없습니다.

고급 generics
conditional types
utility types의 세부 응용
복잡한 mapped type 패턴

이 기능들이 중요해지는 시점은 나중입니다. 처음부터 여기서 막히면 오히려 진입 장벽만 커집니다.

FAQ

Q. JavaScript 프로젝트를 한 번에 다 바꿔야 하나요?

보통은 아닙니다. 점진적 마이그레이션이 더 안전하고 현실적입니다.

Q. `any`를 완전히 금지해야 하나요?

그럴 필요는 없지만, 기본 선택지가 되어서는 안 됩니다.

Q. 고급 TypeScript 전에 뭘 먼저 익혀야 하나요?

함수 경계, 공유 데이터 구조, narrowing, inference, 외부 데이터 처리입니다.

Q. 직접 타입을 써야 할 때와 inference를 믿어도 될 때는 언제인가요?

경계와 공유 타입은 직접 쓰고, 명확한 로컬 값은 inference를 믿는 편이 좋습니다.

먼저 읽어볼 가이드

검색 유입이 많은 핵심 글부터 이어서 보세요.