TypeScript 시작하기

TypeScript는 JavaScript에 타입(type) 을 더한 언어입니다. JavaScript가 할 수 있는 모든 것을 그대로 할 수 있으면서, 코드를 실행하기 전에 타입 오류를 잡아 줍니다. 큰 프로젝트일수록 그 효과가 커집니다.

학습 목표

• 동적 타입 언어인 JS의 한계를 이해한다.
• TypeScript가 JS의 상위 집합(superset) 이라는 의미를 안다.
• 타입 검사가 실제로 막아 주는 버그를 구분한다.
• 컴파일 후 결국 JS로 실행된다는 흐름을 이해한다.

JavaScript의 문제점

JavaScript는 실행해 보기 전까지 타입을 알 수 없습니다. 다음 코드는 문법상 멀쩡하지만 실행하면 엉뚱한 결과가 나옵니다.

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

add(1, 2);      // 3
add('1', 2);    // '12'  ← 문자열 연결이 돼버림
add(1);         // NaN   ← b가 undefined

이런 실수는 코드가 커질수록 찾기 어려워집니다. 오타가 난 속성 이름, 존재하지 않는 함수 호출도 실행해 봐야 알 수 있죠.

TypeScript가 잡아 주는 것

TypeScript는 같은 코드에 타입을 붙여, 잘못된 사용을 에디터와 컴파일 단계에서 빨간 줄로 알려 줍니다.

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

add(1, 2);     // OK
add('1', 2);   // ❌ '1'은 number가 아닙니다
add(1);        // ❌ 인자가 2개 필요합니다

오타나 잘못된 속성 접근도 마찬가지입니다.

const user = { name: '민수', age: 20 };
console.log(user.nmae); // ❌ 'nmae' 속성이 없습니다 (오타)

💡 TIP — TypeScript의 핵심 가치는 "실행 전에 알 수 있다"입니다. 버그를 런타임이 아니라 코드를 작성하는 그 순간에 발견합니다.

JavaScript와의 관계

TypeScript는 JavaScript의 상위 집합입니다. 즉 모든 유효한 JS 코드는 그대로 유효한 TS 코드입니다. 기존 .js 파일의 확장자를 .ts 로 바꾸기만 해도 동작합니다.

JavaScript  ⊂  TypeScript

그리고 브라우저나 Node.js는 TypeScript를 직접 실행하지 못합니다. TypeScript는 컴파일(트랜스파일) 과정을 거쳐 순수 JavaScript로 변환된 뒤 실행됩니다.

your-code.ts  ──(tsc)──▶  your-code.js  ──▶  브라우저/Node 실행

타입 정보는 컴파일 시점에만 쓰이고, 변환된 JS에는 타입이 남지 않습니다. 즉 타입은 런타임 성능에 영향을 주지 않고, 오로지 개발 중의 안전장치입니다.

왜 타입을 쓸까

• 버그 예방: 잘못된 값 전달, 오타, null 접근을 미리 막는다.
• 자동완성: 객체의 속성과 함수 시그니처를 에디터가 정확히 안내한다.
• 안전한 리팩터링: 이름을 바꾸거나 구조를 고칠 때 영향 범위를 컴파일러가 추적한다.
• 문서 역할: 타입 자체가 "이 함수가 무엇을 받고 무엇을 돌려주는지" 설명한다.

요약

TypeScript는 JavaScript에 타입을 더한 상위 집합 언어입니다. 실행 전에 타입 오류를 잡아 버그를 줄이고, 자동완성과 안전한 리팩터링을 돕습니다. 결국 JS로 컴파일되어 실행되며, 타입은 런타임에 영향을 주지 않습니다.