TypeScript — JavaScript에 안전벨트 달기

이 토픽을 마치면

TypeScript가 왜 필요한지 설명할 수 있고, 기본 타입 지정 문법을 알게 됩니다.

JavaScript만으로 잘 돌아가는데 왜?

이 코드를 봐주세요:

javascript

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

add(1, 2);       // 3 — 의도한 결과
add("1", 2);     // "12" — 의도 안 한 결과

"1" + 2가 "12"가 되는 건 JavaScript의 특성입니다. 숫자가 들어와야 하는 곳에 문자열이 들어와도 에러가 안 나고 그냥 실행됩니다. 조용히 잘못된 값을 뱉습니다.

두 명이 만드는 프로젝트에서는 이래도 괜찮습니다. 머릿속에 "여기는 숫자만 넣어야 해"가 들어 있으니까. 근데 개발자가 10명이 되고, 코드가 10만 줄이 되면? 누군가는 반드시 문자열을 넣습니다. 그리고 서비스가 터지고 나서야 발견합니다.

TypeScript는 뭘 해주나

TypeScript는 변수와 함수에 타입을 적어두는 것입니다. 그러면 코드를 실행하기 전에, 적어둔 타입과 안 맞는 곳을 빨간 줄로 알려줍니다.

typescript

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

add(1, 2);       // ✅ OK
add("1", 2);     // ❌ 빨간 줄 — '"1"은 number가 아닙니다'

: number라고 적었을 뿐인데, 실행하기도 전에 버그를 잡았습니다. 안전벨트 같은 겁니다 — 안 매도 운전은 되는데, 사고 나면 생사가 갈립니다.

자주 쓰는 타입들

typescript

// 기본 타입
let name: string = "Alex";
let age: number = 30;
let isAdmin: boolean = false;

// 배열
let scores: number[] = [90, 85, 77];

// 객체
let user: { name: string; age: number } = {
  name: "Alex",
  age: 30,
};

여기까지는 직관적입니다. 자주 쓰면서 힘을 발휘하는 타입이 두 가지 더 있습니다.

Union Type — "이것 또는 저것":

typescript

let status: "success" | "error" | "loading" = "loading";
status = "done";  // ❌ — 정해둔 세 가지가 아님

Tuple — "순서와 타입이 정해진 배열":

typescript

let point: [number, number] = [10, 20];    // ✅
let wrong: [number, number] = [10, "20"];  // ❌

실행 과정

브라우저는 TypeScript를 직접 실행하지 못합니다. TypeScript 컴파일러(tsc)가 .ts 파일을 .js 파일로 변환해주고, 브라우저는 그 .js를 실행합니다.

text

코드 작성 (.ts)  →  tsc 컴파일  →  JavaScript (.js)  →  브라우저 실행
                    ↑
              여기서 타입 에러를
              미리 잡아줌

타입 정보는 컴파일 과정에서 전부 사라집니다. 실행되는 코드는 결국 평범한 JavaScript입니다. 성능에 영향을 주지 않습니다.

프로젝트 루트에 tsconfig.json 파일을 만들어서 컴파일 옵션을 설정합니다. strict 모드를 켜면 타입 검사가 더 엄격해집니다.

그래서 언제 쓰나

혼자 100줄짜리 스크립트를 만들 때는 JavaScript로 충분합니다. 근데 이런 상황에서는 TypeScript가 사실상 필수입니다:

여러 명이 같이 작업하는 프로젝트
6개월 뒤에 내가 다시 열어볼 코드
API 응답 구조가 복잡한 프로젝트

현재 프론트엔드 채용공고 대부분이 TypeScript를 요구하고, React·Vue·Angular 전부 TypeScript를 기본 지원합니다. "써야 하나 말아야 하나"를 고민할 단계는 지났습니다.

에디터가 똑똑해지는 부수 효과

TypeScript를 쓰면 에디터(VS Code 등)가 자동완성을 정확하게 해줍니다.

JavaScript에서 user. 을 입력하면 에디터가 어떤 속성이 있는지 알 수 없습니다. 변수에 뭐가 들어있는지 모르니까요. 근데 TypeScript로 user: { name: string; age: number } 라고 적어두면, user. 을 입력하는 순간 name과 age가 자동완성 목록에 뜹니다.

이게 프로젝트가 커질수록 큰 차이를 만듭니다. 함수 이름이 기억 안 나도, 객체 속성이 뭐가 있는지 몰라도, 에디터가 전부 보여줍니다. 타입 정보가 곧 살아있는 문서가 됩니다.

핵심

TypeScript는 JavaScript에 타입이라는 안전벨트를 달아주는 겁니다. 실행 전에 버그를 잡아주고, 에디터가 자동완성을 똑똑하게 해줍니다. 실행 시점에는 타입 정보가 사라지므로 성능 차이는 없습니다.