TypeScript 입문자가 꼭 알아야 할 핵심 개념 5가지

요즘 채용 공고를 보면 "TypeScript 경험 우대"라는 문구가 거의 빠지지 않습니다. 자바스크립트는 알겠는데 TypeScript는 또 뭔지, 왜 굳이 추가로 배워야 하는지 궁금하신 분들이 많을 겁니다.

저도 처음엔 "굳이 이걸 왜?"라고 생각했습니다. 그런데 한 번 익숙해지고 나니 이제 TypeScript 없이 코드를 짜는 게 더 불안하게 느껴지더군요.

이 글은 TypeScript 입문자가 처음 마주치는 핵심 개념 5가지를 비유와 예시 위주로 풀어봅니다. 코드를 한 줄도 안 써본 분이라도 "아, 대충 이런 거구나" 정도는 잡고 갈 수 있게 썼습니다.

TypeScript가 뭐길래 이렇게 인기일까

TypeScript는 자바스크립트에 타입(type) 검사 기능을 더한 프로그래밍 언어입니다. Microsoft가 만들어 2012년에 공개했고, 지금은 프론트엔드 업계 사실상 표준에 가깝습니다.

자바스크립트는 변수에 무엇을 넣든 신경 쓰지 않습니다. 숫자를 넣었다가 갑자기 문자열을 넣어도 에러를 내지 않죠. 자유롭지만, 그만큼 실수를 잡기 어렵습니다.

TypeScript는 여기에 "이 변수는 숫자만 받습니다" 같은 약속을 미리 적어두게 합니다. 그러면 잘못된 값을 넣으려 할 때 코드를 실행하기 전에 미리 알려주죠.

비유하자면 자바스크립트는 자유 양식 메모장, TypeScript는 항목별 칸이 정해진 신청서입니다. 칸이 정해져 있으면 귀찮지만, 빈칸이나 잘못 적은 부분을 바로 지적해줍니다.

항목	JavaScript	TypeScript
타입 검사	실행 중에 (런타임)	코드 작성 중에 (컴파일 시)
학습 난이도	낮음	중간
실수 발견 시점	늦음	빠름
대규모 프로젝트	관리 어려움	관리 수월
최종 실행 형태	JS 그대로	JS로 변환 후 실행

💡 TypeScript로 작성한 코드는 결국 자바스크립트로 변환되어 실행됩니다. 브라우저나 서버는 여전히 JS만 알아들으니까요. TypeScript는 개발자를 위한 보조 도구라고 보면 편합니다.

핵심 개념 1. 타입(Type) — 변수에 붙이는 이름표

타입은 변수가 어떤 종류의 값을 담을 수 있는지 미리 정해두는 약속입니다. TypeScript의 출발점이자 가장 중요한 개념입니다.

let age: number = 30;
let name: string = "Lumin";
let isReady: boolean = true;

위 코드에서 : number, : string, : boolean 부분이 타입 선언입니다. "이 변수에는 숫자만/문자열만/참거짓만 들어갈 수 있어"라고 못 박아두는 거죠.

만약 age = "서른살"처럼 숫자 자리에 문자열을 넣으면, 코드를 실행하기 전에 에디터가 빨간 줄로 경고합니다. 일종의 맞춤법 검사 같은 기능입니다.

자주 쓰는 타입은 다음과 같습니다.

• number: 숫자 (정수, 소수 모두)
• string: 문자열 (따옴표로 감싼 글자)
• boolean: 참/거짓 (true 또는 false)
• Array: 배열 (예: number[]는 숫자 배열)
• any: 아무거나 (가급적 쓰지 않는 게 좋음)

any는 "타입 검사하지 마"라는 뜻이라 편하지만, 이걸 남발하면 TypeScript를 쓰는 의미가 사라집니다. 저도 입문 때 any로 도배해서 한참 후에 후회했습니다.

핵심 개념 2. 인터페이스(Interface) — 객체의 설계도

인터페이스는 객체(여러 정보를 묶은 데이터)가 어떤 모양이어야 하는지 정의하는 틀입니다. 이름표 여러 개를 한 번에 묶는다고 보면 됩니다.

예를 들어 사용자 정보를 다룬다고 해봅시다. 사용자 한 명에는 이름, 나이, 이메일이 있어야 한다고 약속하고 싶습니다.

interface User {
  name: string;
  age: number;
  email: string;
}

const lumin: User = {
  name: "Lumin",
  age: 30,
  email: "lumin@example.com"
};

이렇게 해두면 User 타입의 객체를 만들 때 email을 빠뜨리거나, age에 문자열을 넣는 실수를 즉시 잡아줍니다.

비유하자면 인터페이스는 회원 가입 폼의 필수 항목 목록입니다. 이름, 나이, 이메일을 다 채우지 않으면 가입 버튼이 눌리지 않는 그 검사 로직을 코드 차원에서 미리 강제하는 셈이죠.

💡 실무에서는 API에서 받아오는 데이터의 모양을 인터페이스로 정의해두는 경우가 가장 많습니다. 서버에서 어떤 정보가 오는지 코드만 봐도 한눈에 보이거든요.

핵심 개념 3. 함수 타입 — 입력과 출력을 약속하기

TypeScript에서 함수는 들어오는 값(매개변수)과 나가는 값(반환값)에 모두 타입을 붙일 수 있습니다. 함수가 일종의 자판기라면, 어떤 동전을 받고 어떤 음료를 내놓는지 미리 적어두는 거죠.

function add(a: number, b: number): number {
  return a + b;
}

a: number, b: number는 "이 함수는 숫자 두 개를 받습니다"라는 뜻입니다. 끝의 : number는 "결과로 숫자를 돌려줍니다"라는 약속이고요.

만약 누군가 add("3", "5")라고 호출하려 하면 TypeScript가 즉시 막아줍니다. 자바스크립트라면 "35"라는 이상한 결과(문자열 합치기)가 나와서 한참을 디버깅해야 했을 상황이죠.

[자바스크립트]                    [타입스크립트]
add("3", "5")                    add("3", "5")
   ↓ 실행됨                          ↓ 코드 작성 중에
"35" 리턴 (버그!)                 빨간 줄 경고 (즉시 발견)
   ↓
며칠 뒤 사용자가 발견
   ↓
야근 확정

이 차이가 작아 보여도, 함수가 수백 개 쌓이는 프로젝트에서는 어마어마한 시간 절약이 됩니다.

핵심 개념 4. 유니온 타입 — "이거 또는 저거"

유니온 타입은 여러 타입 중 하나를 허용하는 방식입니다. | 기호(파이프, 키보드 백슬래시 위)로 타입을 이어붙입니다.

let id: string | number;

id = "abc123";  // OK
id = 42;        // OK
id = true;      // 에러! boolean은 안 됨

위 코드는 id에 문자열이나 숫자는 넣을 수 있지만 그 외에는 안 된다는 뜻입니다.

실무에서는 상태 값을 다룰 때 자주 씁니다. 예를 들어 주문 상태가 "대기중", "배송중", "완료" 셋 중 하나여야 한다면 이렇게 적습니다.

type OrderStatus = "pending" | "shipping" | "done";

let myOrder: OrderStatus = "pending";  // OK
myOrder = "취소";  // 에러! 정해진 셋 중 하나가 아님

오타로 "shiping"이라고 적어도 즉시 잡힙니다. 입력 폼의 드롭다운 메뉴 같은 거죠 — 정해진 보기 안에서만 고를 수 있습니다.

핵심 개념 5. 제네릭(Generic) — 타입에도 변수가 있다

제네릭은 입문자가 가장 어려워하는 부분이라 이번 글에선 개념만 잡고 갑니다. 한마디로 "타입 자리에 들어갈 값을 나중에 정하는 기능"입니다.

비유하자면 택배 상자입니다. 상자(컨테이너)는 같은데, 안에 책이 들어갈 수도, 신발이 들어갈 수도, 옷이 들어갈 수도 있죠. 상자를 만들 때마다 매번 "책 전용 상자", "신발 전용 상자"를 따로 만들면 비효율적입니다.

function wrap<T>(item: T): T {
  return item;
}

wrap<string>("hello");  // T가 string으로 정해짐
wrap<number>(42);       // T가 number로 정해짐

<T>가 바로 그 "나중에 정할 타입"의 자리표시자입니다. T 대신 Box, Item 같은 이름을 써도 됩니다.

실제로 입문 단계에서 제네릭을 직접 작성할 일은 드뭅니다. 다만 라이브러리 문서를 보면 Array<string>이나 Promise<User> 같은 표기가 자주 나오는데, "아 이게 그 안에 들어가는 타입을 적은 거구나" 정도만 알아도 충분합니다.

입문자가 자주 막히는 부분

제가 직접 겪었고, 주변 입문자도 공통으로 막히는 지점들입니다.

막히는 지점	증상	해결 방향
any 남발	에러는 사라지는데 버그도 안 잡힘	정확한 타입을 찾아 적기. 모르겠으면 unknown 사용
타입 vs 인터페이스 혼동	둘 다 비슷해 보임	입문 단계에선 인터페이스 위주로 사용
라이브러리 타입 에러	외부 패키지에서 빨간 줄	@types/패키지명 추가 설치
설정 파일(tsconfig) 공포	옵션이 너무 많음	처음엔 기본 설정 그대로 두기

💡 처음부터 모든 타입을 완벽히 적으려 하지 마세요. 자바스크립트로 일단 돌아가게 만들고, 그다음에 타입을 하나씩 붙여가는 방식이 훨씬 덜 지칩니다.

학습 순서 추천

입문 단계라면 다음 순서를 권합니다. 글 작성 시점 기준 가장 보편적인 학습 경로입니다.

• [ ] 자바스크립트 기본 문법 (변수, 함수, 객체, 배열) 익히기
• [ ] TypeScript 공식 문서의 "Handbook" 1~2장 훑기
• [ ] 위에 정리한 개념 5가지를 직접 코드로 쳐보기
• [ ] 작은 프로젝트(할 일 목록 같은 것)에 TypeScript 적용해보기
• [ ] 에러 메시지를 두려워하지 않고 읽는 습관 들이기

특히 마지막 항목이 중요합니다. TypeScript 에러 메시지는 길고 복잡해 보여도, 차근차근 읽으면 대부분 "여기에 이런 타입을 넣어야 하는데 저런 게 들어왔다"는 단순한 내용입니다.

마무리

TypeScript의 핵심은 "실행 전에 실수를 잡아주는 타입 시스템" 한 줄로 요약됩니다. 타입, 인터페이스, 함수 타입, 유니온 타입, 제네릭 — 이 다섯 개념이 입문의 80%를 차지합니다.

처음엔 빨간 줄이 잔뜩 떠서 답답할 수 있습니다. 저도 그랬고요. 그런데 그 빨간 줄은 사실 미래의 야근을 미리 막아주는 알람이라고 생각하면 좀 덜 미워집니다.

다음으로는 직접 작은 프로젝트를 하나 시작해보시길 권합니다. 머리로만 읽는 것과 손으로 한 번 쳐보는 것은 체감이 완전히 다릅니다. 처음에는 any를 좀 써도 괜찮으니, 일단 익숙해지는 게 먼저입니다.

함께 보면 좋은 글

• python 입문
• Python vs Go 2026년 어떤 언어부터 배울까
• Rust 5분 입문 — 왜 다들 Rust로 갈아타나