금요일 오후 다섯 시, 배포를 마치고 퇴근 가방을 챙기던 신입 개발자 민수 씨의 휴대폰이 울렸습니다. 운영 화면에 "Cannot read properties of undefined (reading 'name')"이라는 오류가 가득하다는 연락이었습니다. 원인은 단순했습니다. 서버가 돌려준 값에 user가 없을 수도 있다는 사실을 코드가 전혀 모르고 있었던 것입니다. 이런 날을 줄이려고 만들어진 도구가 바로 TypeScript입니다.

타입은 잔소리가 아니라 안전벨트다

자바스크립트는 변수에 무엇이든 담을 수 있어서 자유롭지만, 그 자유의 대가는 실행해 보기 전에는 모른다는 점입니다. TypeScript는 코드를 실행하기 전에 컴파일 단계에서 "이 값은 문자열이어야 하는데 숫자가 들어갔다"고 알려 줍니다.

버그를 고객이 먼저 발견하느냐, 에디터의 빨간 줄이 먼저 발견하느냐의 차이입니다.

처음에는 빨간 줄이 귀찮게 느껴지지만, 몇 주만 지나면 오히려 빨간 줄이 없는 코드가 불안해집니다. 한 번 맛본 안전벨트는 다시 풀기 어렵습니다.

기본 문법은 이 정도면 충분하다

변수와 함수에 타입을 붙이는 방법은 콜론 하나로 끝납니다. 처음부터 모든 곳에 타입을 쓸 필요는 없고, 컴파일러가 추론할 수 있는 곳은 비워 두는 편이 읽기 좋습니다.

// 객체의 모양을 interface로 정의
interface User {
  id: number;
  name: string;
  email?: string; // 있을 수도, 없을 수도 있음
}

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

greet({ id: 1, name: "민수" });          // OK
greet({ id: 2, nmae: "영희" });          // 오타: 컴파일 오류

두 번째 호출처럼 오타가 있으면 실행하기도 전에 잡힙니다. 자바스크립트였다면 화면에 "안녕하세요, undefined님"이 찍힌 뒤에야 알았을 겁니다. 물음표가 붙은 email?은 선택 속성이라는 뜻이고, 이 한 글자가 앞에서 본 장애의 해법으로 이어집니다.

undefined와 싸우는 법: strict 모드

민수 씨의 장애를 막아 줄 설정은 tsconfig.json의 "strict": true입니다. 이 옵션을 켜면 null이나 undefined가 될 수 있는 값을 그냥 쓰는 코드가 오류로 바뀝니다.

function getUserName(user?: User): string {
  // return user.name;  // strict 모드에서는 오류!
  if (!user) {
    return "손님";
  }
  return user.name; // 여기서는 user가 확실히 존재
}

이처럼 조건문으로 가능성을 걸러 내는 과정을 타입 좁히기(narrowing)라고 합니다. if 블록을 지나면 컴파일러가 "이제 user는 undefined가 아니다"라고 이해해 줍니다. 새 프로젝트라면 처음부터 strict를 켜세요. 나중에 켜면 수백 개의 오류를 한꺼번에 마주해야 합니다.

AD

any는 빌려 쓰는 빚이다

막히는 순간 가장 유혹적인 것이 any입니다. 오류가 사라지니 편하지만, 사실상 그 변수에 한해 TypeScript를 끄는 일입니다. 쓰더라도 아래 대안을 먼저 떠올려 보세요.

상황any 대신
어떤 값이 올지 모른다unknown (쓰기 전 검사를 강제)
몇 가지 값 중 하나다유니온 "ok" \| "error"
구조가 반복된다interface, 제네릭

특히 unknown은 "모르는 값"을 안전하게 받는 그릇입니다. 외부 API 응답을 받을 때 any로 두지 말고 unknown으로 받은 뒤 검사해서 쓰면, 서버가 갑자기 모양을 바꿔도 코드가 조용히 망가지지 않습니다.

도입은 작게, 한 파일부터

기존 자바스크립트 프로젝트를 한 번에 바꾸려 하면 지칩니다. 현실적인 순서는 이렇습니다.

  • npm install -D typescript 후 npx tsc --init으로 설정 파일 만들기
  • allowJs: true로 두고 새로 만드는 파일부터 .ts로 작성
  • 자주 고장 나는 모듈, 즉 결제나 로그인처럼 중요한 곳부터 타입 추가
  • 익숙해지면 strict를 켜고 오류를 하루에 몇 개씩 정리

정리하며

TypeScript의 핵심은 어려운 문법이 아니라 "실행 전에 실수를 발견한다"는 한 가지 약속입니다. 기본 타입과 interface, strict 모드, 그리고 any 대신 unknown. 이 네 가지만 손에 익혀도 민수 씨 같은 금요일 저녁은 크게 줄어듭니다. 오늘 작은 파일 하나만 .ts로 바꿔 보세요. 빨간 줄은 당신을 괴롭히는 게 아니라, 퇴근길을 지켜 주는 동료입니다.