“JavaScript로 프로젝트 만들다가 변수 타입 때문에 버그 찾느라 3시간 날렸어요.” 이런 경험 있으신가요? 저는 엄청 많았어요. 그래서 TypeScript 배우기 시작했는데, 진작 배울걸 그랬다는 생각이 들더라고요.

TypeScript가 뭔가요?

TypeScript는 Microsoft에서 만든 JavaScript에 타입을 더한 언어예요. 쉽게 말하면 JavaScript의 업그레이드 버전이라고 보면 됩니다.

JavaScript 코드:

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

add(1, 2);        // 3
add("1", "2");    // "12" (앗, 문자열 합쳐짐!)

TypeScript 코드:

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

add(1, 2);        // 3
add("1", "2");    // 에러! 타입이 안 맞아요

실행 결과:

타입을 지정해두면 잘못된 값이 들어올 때 바로 에러를 내줘요. 실행하기 전에 미리 알려주니까 버그가 훨씬 줄어듭니다.

JavaScript와 TypeScript의 차이

1. 타입 시스템

JavaScript는 타입을 실행할 때 확인해요. 그래서 에러가 나도 실행해봐야 알아요.

TypeScript는 코드 작성할 때 바로 확인합니다. VSCode 같은 에디터에서 빨간 줄 그어가며 “여기 에러예요!” 알려줘요.

2. 컴파일 과정

JavaScript는 바로 실행 가능하지만, TypeScript는 JavaScript로 변환(컴파일)하는 과정이 필요해요.

// TypeScript 파일 (hello.ts)
let message: string = "안녕하세요";
console.log(message);

이걸 컴파일하면:

// JavaScript 파일 (hello.js)
let message = "안녕하세요";
console.log(message);

타입 정보는 사라지고 순수한 JavaScript가 됩니다. 브라우저는 JavaScript만 이해하거든요.

3. 개발자 경험 (DX)

TypeScript 쓰면 자동완성이 엄청 정확해져요. 객체의 속성, 함수의 매개변수, 반환값까지 다 알려주니까 개발 속도가 빨라집니다.

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

const user: User = {
  name: "김철수",
  age: 25,
  // em 까지만 쳐도 email이 자동완성됨!
};

TypeScript를 왜 배워야 할까?

1. 에러를 미리 잡아줌

제가 JavaScript로 프로젝트 하다가 제일 짜증났던 게 런타임 에러예요. 배포하고 나서 사용자가 “여기 안 돼요!” 하면 그때 알게 되는…

TypeScript는 코드 작성 중에 바로 에러를 보여줘서 이런 일이 확 줄어들어요.

let count: number = 0;
count = "문자열";  // 즉시 에러 표시!

실행 결과:

2. 대규모 프로젝트에 필수

회사에서 실무 프로젝트 하면 파일이 수백 개예요. JavaScript로 하면 “이 함수 어디서 쓰이지? 매개변수 뭐였지?” 매번 찾아봐야 해요.

TypeScript는 타입 정의만 보면 바로 알 수 있어요. 협업할 때 특히 좋습니다.

3. 취업 시장에서 우대

2025년 현재, 프론트엔드 개발자 채용 공고 보면 TypeScript 우대 조건이 엄청 많아요. React, Vue, Angular 모두 TypeScript 지원하고요.

• 구글: Angular는 TypeScript 기반
• 페이스북: React도 TypeScript 지원 강화
• 네이버, 카카오: 신규 프로젝트는 거의 TypeScript

실제로 구인구직 사이트에서 “프론트엔드” 검색하면 TypeScript 요구하는 곳이 60% 넘어요.

4. JavaScript를 더 잘 이해하게 됨

저는 TypeScript 배우면서 JavaScript를 더 깊이 이해하게 됐어요. 타입을 명확히 하다 보니 “아, 이 함수는 이렇게 동작하는구나” 하고 명확해지더라고요.

TypeScript의 장점

1. 코드 품질 향상

타입 체크 덕분에 버그가 확실히 줄어들어요. 특히 null, undefined 관련 에러가 많이 줄어듭니다.

function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

greet("철수");           // OK
greet(null);             // 에러!

실행 결과:

2. 리팩토링이 쉬움

코드 구조를 바꿀 때 TypeScript는 관련된 모든 곳을 찾아서 에러를 보여줘요. JavaScript였으면 놓친 부분에서 런타임 에러 터졌을 거예요.

3. 문서화 효과

타입 정의 자체가 문서 역할을 해요. 주석 안 써도 코드만 봐도 이해가 됩니다.

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
}

// 함수 시그니처만 봐도 뭘 받고 뭘 리턴하는지 명확함
function getProduct(id: number): Product | null {
  // ...
}

TypeScript를 사용하는 회사들

• Microsoft: TypeScript를 만든 회사, Visual Studio Code도 TypeScript로 작성
• Google: Angular 프레임워크가 TypeScript 기반
• Airbnb: 프론트엔드 코드베이스를 TypeScript로 전환
• Slack: 대규모 리팩토링에 TypeScript 활용
• Shopify: React 프로젝트에 TypeScript 도입
• 네이버, 카카오, 토스: 국내 대기업들도 활발히 사용

실제로 GitHub에서 TypeScript는 4번째로 많이 사용되는 언어예요 (2024년 기준).

TypeScript의 단점?

솔직히 단점도 있어요:

1. 초기 학습 곡선

JavaScript만 하다가 TypeScript 시작하면 타입 개념이 좀 낯설어요. 저도 처음엔 “왜 이렇게 복잡하게 써야 해?” 했거든요. 근데 한두 달 쓰다 보면 익숙해져요.

2. 코드량이 늘어남

타입 정의하는 코드가 추가되니까 JavaScript보다 코드가 길어져요. 작은 프로젝트에서는 오히려 번거로울 수 있습니다.

3. 컴파일 시간

TypeScript를 JavaScript로 변환하는 시간이 필요해요. 큰 프로젝트면 몇 초 정도 걸리는데, 그래도 요즘은 컴파일러가 빨라져서 크게 문제는 안 됩니다.

TypeScript 배울 가치가 있을까?

제 경험상 무조건 있어요. 처음엔 좀 불편해도 나중에 가면 TypeScript 없이 못 코딩하게 돼요. 특히:

• 프론트엔드 개발자 취업 준비 중이라면 필수
• 회사에서 React, Vue 프로젝트 한다면 강력 추천
• 개인 프로젝트라도 규모가 크다면 도입 고려
• JavaScript 기초가 있다면 지금 바로 시작

다음 글에서는 TypeScript 개발 환경을 세팅하고 첫 프로젝트를 만들어볼게요. Node.js 설치부터 차근차근 알려드릴 테니 걱정 마세요!

---

다음 글 보기

← 블로그 목록으로