JavaScript의 상위 집합 TypeScript은 무엇일까요?!

요즘 웹 개발 세계에서 TypeScript라는 이름이 자주 들리는데 많이 생소하실텐데 주변 개발자들이 타입스크립트로 바꿨어 라고 말하는 걸 들어본 적이 있으실거에요. 저도 처음엔 그냥 또 하나의 JavaScript 변형인 줄 알았는데, 알고 보니 개발 방식을 완전히 바꿔놓는 강력한 도구더라고요. Microsoft가 2012년에 내놓은 이후, Angular부터 시작해서 React, Vue까지 주요 프레임워크들이 하나둘 TypeScript를 지원하기 시작했어요. 이제는 프론트엔드 개발자라면 TypeScript 한 번쯤은 만나게 되는 세상이 됐습니다. 오늘은 제가 왜 JavaScript 개발자들이 하나둘 TypeScript 진영으로 넘어가는지, 그 이유를 속 시원히 파헤쳐 드릴게요.

TypeScript란 무엇일까?

TypeScript는 간단히 말해 JavaScript에 타입 시스템을 얹은 언어예요. JavaScript가 변수의 타입을 실행 중에 결정하는 동적 타입 언어라면, TypeScript는 개발할 때 미리 타입을 정해주는 정적 타입 언어죠. 이게 바로 TypeScript가 JavaScript의 상위 집합(Superset)이라 불리는 이유인데요. 모든 JavaScript 코드는 TypeScript로 쓸 수 있지만, TypeScript의 특별한 기능들은 JavaScript로는 쓸 수 없어요.

실제로 브라우저는 TypeScript를 직접 실행하지 못합니다. TypeScript로 작성한 코드는 컴파일러(tsc)를 통해 일반 JavaScript로 변환된 후에야 실행돼요. 이 과정에서 타입 관련 오류가 있으면 미리 잡아내줘서, 왜 이 함수가 실행 중에 갑자기 터지지? 라는 악몽 같은 상황을 많이 줄일 수 있죠. 특히 여러 사람이 함께 일하는 큰 프로젝트에서는 이런 특성이 정말 값어치를 한답니다.

TypeScript의 큰 장점

TypeScript의 가장 큰 매력은 역시 타입 안정성인데요. 예를 들어볼게요. JavaScript에서는 이런 일이 흔합니다

function calculateAge(birthYear) {
  return 2025 - birthYear;
}
calculateAge("1990");

의도는 나이를 계산하는 함수인데, 문자열을 넣으면 결과가 완전히 달라져버리죠. TypeScript에서는 이런 실수를 미리 방지할 수 있어요.

function calculateAge(birthYear: number): number {
  return 2025 - birthYear;
}

calculateAge("1990"); // 에러: 문자열은 숫자 타입에 할당할 수 없습니다.

 

또 개발할 때 경험이 완전히 달라져요. 함수나 객체의 속성을 작성할 때 자동 완성이 정확하게 뜨고, 타입 오류는 빨간 줄로 즉시 표시되는데요. VSCode 같은 에디터와 함께 쓰면 그 효과는 배가 되죠. 큰 프로젝트에서 다른 사람이 작성한 코드를 볼 때도, 타입 정보가 일종의 문서 역할을 해줘서 이 함수에 뭘 넣어야 하지? 하는 고민을 많이 줄여줍니다.

TypeScript 도입 시 고려할 부분

TypeScript를 시작할 때 넘어야 할 첫 산은 바로 학습 곡선인데 JavaScript는 알아도 타입 시스템의 개념과 문법은 또 다른 영역이니까요. 특히 제네릭이나 유니온 타입 같은 걸 처음 마주하면 이게 뭐지? 싶을 수 있어요. 하지만 걱정 마세요. 처음에만 어렵지, 기본 개념만 이해하면 나머지는 자연스럽게 따라오죠. 그리고 이런 초기 투자는 나중에 버그 잡는 시간을 크게 줄여준다는 걸 경험하게 될 거예요.

빌드 과정은 조금 복잡해질 수 있지만 webpack이나 Babel과 함께 쓸 때 설정이 꽤 까다로울 수 있고, 기존 JavaScript 프로젝트를 TypeScript로 바꾸는 건 생각보다 손이 많이 가는 작업입니다. 다행히 TypeScript는 점진적으로 도입할 수 있게 설계되어 있어요. 처음엔 any 타입을 활용해 최소한의 변경으로 시작하고, 천천히 정확한 타입을 입혀나가는 방식으로 접근할 수 있어요.

최근 JavaScript도 계속 발전하고 있는데, TypeScript는 이런 최신 기능들을 더 안전하게 쓸 수 있게 해줘요. 예를 들어 ES6의 클래스, 화살표 함수, 비구조화 할당 같은 기능들을 타입 안정성과 함께 사용할 수 있죠. 또 놀라운 점은 거의 모든 유명 라이브러리가 TypeScript 타입 정의를 제공한다는 거예요. 덕분에 React, Vue, Lodash 같은 라이브러리를 쓸 때도 타입의 혜택을 그대로 누릴 수 있습니다.

TypeScript는 그저 유행이 아니라, 웹 개발의 미래를 보여주는 중요한 기술이라고 생각해요. JavaScript의 자유로움과 정적 타입 언어의 안정성이라는 두 마리 토끼를 모두 잡았거든요. 처음에는 조금 더 많은 코드를 작성해야 한다는 점이 귀찮게 느껴질 수 있지만, 프로젝트 규모가 커질수록 그 가치는 분명히 드러납니다. 혼자 개발할 때보다 팀으로 일할 때 그 진가를 더 발휘하고요.

사실 저도 TypeScript를 처음 접했을 때는 이런 복잡한 걸 왜 써야 하지? 라는 생각이 들었어요. 하지만 몇 개월만 써보니 이제는 TypeScript 없이 개발하는 게 불안하게 느껴질 정도랍니다. 여러분도 한번 도전해보세요. 처음엔 어색하고 불편하겠지만, 곧 이거 없이 어떻게 살았지? 라고 느끼시게 될 거예요.!