왜 TypeScript인가요? 자바스크립트의 자유와 실수 사이

처음 자바스크립트를 배우면 꽤 신나는 순간이 있습니다. 브라우저에서 바로 실행되고, 문법도 비교적 가볍고, 작은 아이디어를 금방 화면으로 옮길 수 있기 때문입니다. 한마디로 자바스크립트는 행동력이 좋은 언어입니다.

그런데 프로젝트가 조금만 커지면, 이 행동력이 가끔 사고도 칩니다. 오늘은 바로 그 지점, 자바스크립트의 자유가 언제 장점이고 언제 실수의 시작이 되는지, 그리고 그 틈을 TypeScript가 어떻게 메워 주는지 알아보겠습니다.

자바스크립트는 왜 이렇게 사랑받았을까요?

자바스크립트가 오랫동안 사랑받은 이유는 분명합니다. 빠르게 만들 수 있고, 어디서나 돌아가고, 시작 장벽이 낮습니다. 브라우저는 기본적으로 자바스크립트를 이해하고, Node.js를 쓰면 서버에서도 자바스크립트를 사용할 수 있습니다.

무엇보다 자바스크립트는 아주 유연합니다. 변수를 만들 때 타입을 미리 적지 않아도 되고, 객체도 자유롭게 다룰 수 있고, 일단 실행해 보면서 고쳐 나가기가 쉽습니다. 초보자에게는 이 유연함이 정말 큰 장점입니다.

하지만 여기서 중요한 사실이 하나 있습니다. 유연함은 편리함이면서 동시에 불확실함이기도 하다는 점입니다.

자유로운 언어가 만나면 생기는 작은 사고들

예를 들어 이런 함수를 생각해 봅시다.

function calculateTax(price, rate) {
  return price * rate;
}

console.log(calculateTax(100, 0.1));
console.log(calculateTax("100", 0.1));
console.log(calculateTax(100));

겉으로 보면 큰 문제가 없어 보입니다. 하지만 두 번째 줄과 세 번째 줄이 묘합니다.

자바스크립트는 종종 "내가 알아서 해볼게"라는 태도를 보입니다. 문자열 "100"에 숫자를 곱하면 숫자처럼 계산해 버리기도 하고, 빠진 인자는 undefined가 되어 결과가 NaN이 되기도 합니다. 프로그램은 일단 돌아가지만, 개발자가 의도한 대로 돌아간다고는 할 수 없습니다.

바로 이런 지점이 무섭습니다. 에러가 바로 터지지 않기 때문입니다. 조용히 잘못된 결과를 만들고, 그 결과가 화면이나 데이터베이스나 결제 로직까지 흘러가면, 나중에 문제를 찾기가 훨씬 어려워집니다.

초보자 입장에서는 이런 일이 특히 헷갈립니다. "분명 실행은 되는데 왜 결과가 이상하지?"라는 상황이 자주 생기기 때문입니다.

TypeScript는 무엇을 더해 줄까요?

TypeScript는 자바스크립트를 버리고 새로 배우는 완전히 다른 언어가 아닙니다. 자바스크립트의 모든 기능을 그대로 포함하면서, 그 위에 타입 시스템을 얹은 언어입니다. 다시 말해, TypeScript는 자바스크립트에 "설명서 한 장"을 더 붙여 주는 느낌에 가깝습니다.¹

예를 들어 아까 함수를 TypeScript로 쓰면 이렇게 됩니다.

function calculateTax(price: number, rate: number): number {
  return price * rate;
}

calculateTax(100, 0.1);    // 정상
calculateTax("100", 0.1); // 오류
calculateTax(100);         // 오류

여기서 price: number는 "price는 숫자여야 한다"는 뜻이고, ): number는 "이 함수는 숫자를 반환한다"는 뜻입니다.

이제 TypeScript는 개발 중에 이렇게 말해 줍니다.

"잠깐, 여기 문자열이 들어왔는데요?"

"잠깐, 인자가 하나 빠졌는데요?"

즉, 실행하기 전에 이상한 부분을 먼저 알려 줍니다. 이게 TypeScript의 핵심 매력입니다.

실행 전에 잡는다는 게 왜 그렇게 중요할까요?

프로그래밍에서 버그는 크게 세 순간에 발견됩니다.

• 코드를 작성하는 동안 발견되는 버그

• 실제로 실행한 뒤에야 드러나는 버그

• 사용자가 이미 겪고 나서야 알게 되는 버그

당연히 앞에서 발견할수록 좋습니다. 고치기 쉽고, 영향도 작고, 마음도 덜 아픕니다.

TypeScript는 바로 이 첫 번째 단계, 즉 개발 중 발견을 크게 늘려 줍니다. 자바스크립트가 "일단 실행해 보자"에 강하다면, TypeScript는 "실행 전에 한 번 점검하자"에 강합니다.

이 차이는 프로젝트가 커질수록 엄청나게 커집니다. 파일이 수십 개, 수백 개가 되고, 함수가 서로 얽히고, 여러 사람이 함께 작업하는 순간부터는 "나중에 보면 되지"가 점점 위험한 전략이 됩니다.

타입이란, 코드를 위한 이름표입니다

여기서 나오는 핵심 개념이 바로 타입(type) 입니다.

타입은 값의 종류를 뜻합니다. 예를 들면 문자열, 숫자, 불리언 같은 것들입니다. 그런데 TypeScript에서 타입은 단순히 값의 종류만 나타내지 않습니다. 그 값이 어떤 모양인지, 무엇을 기대하는지, 무엇을 돌려주는지까지 표현하는 데 쓰입니다.¹

예를 들어 이런 객체가 있다고 해 봅시다.

const user = {
  name: "민수",
  age: 20,
};

자바스크립트에서는 이 객체의 age를 나중에 문자열로 바꿔도 막지 않습니다.

user.age = "스무 살";

하지만 TypeScript는 이런 순간에 "방금 전까지 숫자였는데 왜 갑자기 문자열이 됐죠?"라고 질문합니다. 이런 질문은 귀찮아 보일 수 있습니다. 하지만 사실은 아주 친절한 질문입니다. 나중에 더 큰 문제를 막아 주니까요.

TypeScript는 매번 타입을 다 적어야 하나요?

꼭 그렇지는 않습니다. TypeScript는 자바스크립트를 잘 이해해서, 많은 경우 타입을 스스로 추론합니다. 이것을 타입 추론이라고 합니다.¹

let message = "안녕하세요";

이 코드만 보고도 TypeScript는 message가 문자열이라는 사실을 꽤 잘 알아냅니다. 그래서 항상 모든 곳에 타입을 장황하게 적는 언어는 아닙니다.

즉, TypeScript는 엄격한 선생님이라기보다, 눈치 빠른 조교에 가깝습니다. 알아서 알 수 있는 건 알아서 챙기고, 애매한 부분에서만 "설명을 조금 더 해 주세요"라고 요청합니다.

초보자에게 TypeScript가 특히 좋은 이유

처음에는 "타입까지 적어야 한다니 더 어려운 것 아닌가요?"라는 생각이 들 수 있습니다. 맞습니다. 아주 처음 며칠은 자바스크립트보다 느리게 느껴질 수 있습니다.

하지만 초보자에게 TypeScript는 오히려 좋은 훈련 도구가 됩니다. 이유는 간단합니다. 코드가 잘못된 방향으로 흘러가려고 할 때, 비교적 빨리 알려 주기 때문입니다.

예를 들어 함수에 무엇을 넣어야 하는지, 무엇이 반환되는지, 객체 안에 어떤 속성이 있어야 하는지를 코드가 스스로 드러내 줍니다. 그래서 TypeScript 코드는 점점 읽기 쉬운 코드, 다시 말해 "의도가 보이는 코드"가 됩니다.

특히 다음 같은 장면에서 도움이 큽니다.

• 함수에 잘못된 값을 넘겼을 때

• 객체에 없는 속성을 읽으려 할 때

• 리팩터링하다가 다른 파일을 망가뜨렸을 때

이런 실수는 자바스크립트에서도 당연히 조심할 수 있습니다. 하지만 TypeScript는 조심성만 믿지 않고, 도구로 함께 막아 줍니다.

좋은 도구는 왜 생산성을 높일까요?

TypeScript의 장점은 단순히 "오류를 잡는다"에서 끝나지 않습니다. 타입 정보가 생기면 편집기도 훨씬 똑똑해집니다. 자동 완성, 정의로 이동, 안전한 이름 변경, 함수 사용법 힌트 같은 기능이 더 정확해집니다. TypeScript 공식 문서도 이런 타입 정보와 추론이 편집기 경험을 크게 향상시킨다고 설명합니다.¹

이 말은 곧 이런 뜻입니다.

코드를 기억에 의존해 쓰는 시간이 줄고, 도구의 도움을 받는 시간이 늘어난다는 뜻입니다.

특히 협업할 때 이 차이는 더 큽니다. 내가 만든 함수의 사용법을 따로 길게 설명하지 않아도, 타입 선언이 일종의 살아 있는 문서 역할을 해 주기 때문입니다.

그럼 자바스크립트는 나쁜 언어인가요?

절대 아닙니다.

이 책의 중요한 관점 하나를 여기서 분명히 하고 싶습니다. TypeScript는 자바스크립트를 공격하기 위해 나온 언어가 아닙니다. 자바스크립트가 너무 널리 쓰이고, 너무 유용하고, 너무 유연했기 때문에, 그 위에 더 안전한 작업 방식을 얹으려는 시도로 보는 편이 훨씬 정확합니다.¹

자바스크립트는 여전히 훌륭합니다. 작은 실험, 빠른 프로토타입, 학습용 예제, 가벼운 스크립트에서는 자바스크립트가 더 간편할 수도 있습니다.

다만 프로젝트가 길어지고, 사람이 늘어나고, 코드가 복잡해질수록 "자유"만으로는 부족해집니다. 그때 필요한 것이 규칙과 점검 도구이고, TypeScript가 바로 그 역할을 합니다.

비유하자면 이렇습니다. 자바스크립트가 속도감 좋은 자전거라면, TypeScript는 거기에 브레이크 점검표, 라이트, 헬멧, 내비게이션이 추가된 버전입니다. 여전히 달릴 수 있고, 여전히 재미있지만, 훨씬 덜 불안합니다.

TypeScript도 만능은 아닙니다

여기서 한 가지는 분명히 해야 합니다. TypeScript가 있다고 해서 모든 버그가 사라지지는 않습니다.

예를 들어 잘못된 비즈니스 로직, 서버에서 실제로 이상한 데이터가 오는 문제, 사용자 입력 검증 부족 같은 것은 TypeScript만으로 완전히 해결되지 않습니다. TypeScript는 실행 전 점검에 강하지만, 실제 세상에서 들어오는 모든 데이터를 마법처럼 정화해 주지는 않습니다.

그래서 TypeScript는 테스트, 디버깅, 런타임 검증과 함께 써야 더 강력합니다.

하지만 그럼에도 불구하고 TypeScript의 가치는 큽니다. 왜냐하면 우리가 자주 하는 실수 중 상당수는 "값의 모양"과 "사용 방식"에서 발생하고, TypeScript는 바로 그 부분을 잘 잡아 주기 때문입니다.

이미 자바스크립트 프로젝트가 있다면 어떻게 하나요?

좋은 소식이 있습니다. TypeScript는 점진적으로 도입할 수 있습니다. 공식 문서에서도 기존 자바스크립트 코드는 TypeScript 코드이기도 하다고 설명합니다.¹ 즉, 처음부터 전부 갈아엎을 필요가 없습니다.

아주 천천히 시작할 수도 있습니다.

• 새 파일만 TypeScript로 작성하기

• 기존 .js 파일에 타입 점검을 조금씩 도입하기

• 중요한 함수와 데이터 구조부터 타입 붙이기

심지어 자바스크립트 파일에서도 @ts-check를 사용하면 타입 점검의 도움을 일부 받을 수 있습니다.² 이 말은 곧, TypeScript가 "다 바꾸지 않으면 쓸 수 없는 기술"이 아니라는 뜻입니다.

이 점이 정말 중요합니다. TypeScript는 벽이 아니라 경사로입니다. 한 번에 점프하지 않아도 올라갈 수 있습니다.

결국, 왜 배워야 할까요?

이 장의 핵심 질문으로 돌아가 봅시다.

"굳이 왜 TypeScript를 배워야 하지?"

대답은 이렇습니다.

TypeScript는 코드를 더 화려하게 만들기 위해서가 아니라, 덜 헷갈리게 만들기 위해 배웁니다. 덜 헷갈리면 실수가 줄고, 실수가 줄면 수정 시간이 줄고, 수정 시간이 줄면 개발이 더 즐거워집니다.

처음에는 타입을 적는 일이 조금 번거롭게 느껴질 수 있습니다. 하지만 어느 순간부터는 반대로 느끼게 됩니다. 타입이 없는 코드가 더 불안해집니다. 함수가 무엇을 받는지 모르겠고, 객체에 뭐가 들어 있는지 확신이 없고, 수정할 때 어디가 깨질지 두렵기 때문입니다.

TypeScript는 그 불안을 줄여 줍니다.

그리고 이 장에서 그 이유를 납득했다면, 앞으로 나올 문법들은 단순한 규칙 암기가 아니라 문제를 해결하기 위한 도구로 보이기 시작할 것입니다. 바로 그때부터 학습 속도가 훨씬 빨라집니다.

이 장의 한 줄 정리

자바스크립트는 자유롭고 빠르지만, 그 자유는 프로젝트가 커질수록 실수의 여지도 키웁니다. TypeScript는 자바스크립트 위에 타입 시스템을 더해, 실행 전에 더 많은 문제를 발견하고, 코드를 더 읽기 쉽고 고치기 쉽게 만들어 주는 안전장치입니다.¹

다음 장에서는 이 안전장치를 실제로 켜 보겠습니다. 개발 환경을 준비하고, 첫 번째 TypeScript 프로그램을 함께 만들어 보겠습니다.

참고

¹TypeScript for JavaScript Programmers

²TypeScript Playground Example - Errors