JavaScript가 아닌 TypeScript를 사용하는 이유

목차

1. TypeScript란?

    1-1. 타입스크립트

    1-2. JsDoc와 타입스크립트

2. TypeScript의 특징

3. TypeScript의 장단점

---

1. TypeScript란?

1. 타입 스크립트

타입스크립트는 자바스크립트에 타입을 부여한 언어로, Microsoft에서 개발하고 유지관리하고 있다.

Apache 라이센스가 부여된 오픈 소스이며, 2012년 10월에 처음 릴리즈되었다.

 

자바스크립트가 타입을 유연하게 하여 어떻게든 에러가 발생하지 않도록 설계하는 것이 기본 흐름이었다면,

타입스크립트는 타입을 명확하게 부여하여 처음부터 안전한 개발을 하여 에러가 발생하지 않도록 하는 것이 탄생 의의이다.

 

자바스크립트에 타입 등을 추가한 확장판 느낌으로,

타입스크립트로 만든 프로젝트를 브라우저에서 실행하려면 파일을 자바스크립트로 컴파일 해주어야 한다.

 

2. JsDoc와 타입스크립트

JsDoc는 자바스크립트 코드에 주석을 통해 타입 정보나 함수의 동작을 문서화하는 표준 방식이다.

타입을 정의하지 않고도, 주석을 통해 개발자와 개발 도구가 타입 정보를 추론할 수 있도록 돕는다.

 

타입스크립트를 처음 시작할 때 진입 장벽이 있는 반면, JsDoc를 사용하면 타입을 까다롭게 지정하지 않고도 타입 추론을 할 수 있는 것이다.

 

그러나 JsDoc는 실제 타입 검사를 수행하지 않아, 타입 정보의 문서적 의미만 가지며 정적 타입 안전성을 보장하지는 않는다.

컴파일러가 오류를 검출할 수 없다는 것이다. 단지 조금 더 편리한 주석 처리이다.

 

---

2. TypeScript의 특징

타입스크립트는 JavaScript + 정적 타입 시스템 + 최신 ECMAScript 문법 지원 + 개발 생산성 향상 기능 을 합친 언어이다.

 

1. 정적 타입 시스템

1) 정적 타입 검사

타입스크립트는 코드 실행 전 컴파일 단계에서 타입 오류를 검출한다.

런타임이 아닌 개발 시점에 타입 불일치를 미리 발견할 수 있어 오류 가능성을 줄인다.

이를 통해 코드의 안정성과 유지보수성을 크게 향상시킨다.

let age: number = 25;	// number로 타입 지정
age = "25";	// 오류 발생

 

2) 강력한 타입 추론

모든 변수에 일일이 타입을 명시하지 않아도, 타입스크립트 컴파일러는 변수의 초기값, 함수의 반환값을 기반으로 자동으로 타입을 추론한다.

let msg = "hello";	// string으로 추론됨
msg = 123;	// 오류 발생

 

3) 인터페이스와 제네릭

타입스크립트는 객체 구조를 정의하는 인터페이스(interface), 타입을 매개변수화하는 제네릭(generics)을 지원한다.

이를 통해 재사용성 높은 코드 설계가 가능하다.

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

function greet<T extends User>(user: T): string {
  return `안녕하세요 ${user.name}님 (${user.age}세)`;
}

 

 

2. 최신 ECMAScript 문법 지원

타입스크립트는 ES6 이상 문법을 모두 지원하며, 하위 호환성을 위해 컴파일 시 구버전 자바스크립트로 변환할 수 있다.

 

3. 개발 향상성 기능 지원

1) 도구 친화성

vs code 등의 주요 IDE에서 자동 완성, 타입 검사, 코드 리팩토링, 정의 이동 등 다양한 개발자 지원 기능을 제공한다.

이를 통해 개발 속도의 향상, 오류 감소에 기여한다.

 

2) 점진적 적용 가능

기존 자바스크립트 프로젝트에 타입스크립트를 부분적으로 도입할 수 있다.

.js 파일에 점진적으로 .ts를 적용하거나, allowJs 옵션을 통해 두 언어를 혼합 사용할 수 있다.

 

---

3. TypeScript의 장단점

타입스크립트는 개발 효율성과 유지보수성을 높이기 위해 설계되었다.

하지만 장점만 있는 것은 아니다.

장점	코드 안정성 향상	런타임 이전에 에러를 조기 발견하여 버그 예방 및 QA 비용 감소
	뛰어난 자동 완성과 리팩토링 지원	IDE가 타입 정보를 인식하여 자동 완성, 자동 리팩토링이 정교하게 동작 → 코드 생산성 및 유지보수성 향상
	명확한 코드 의도 표현	타입 선언을 통해 개발자의 의도가 명확하게 드러남
	최신 ECMAScript 기능 선제 지원	ECMAScript 표준에 앞서 class, decorator, async/await 등의 기능을 지원
	점진적 도입 가능	js와 혼용이 가능하여 대규모 리팩토링 없이도 점진적 리팩토링 가능
단점	초기 설정 및 학습 비용	컴파일 설정, 타입 선언 관리가 필요하며, 초기 학습 시간이 필요
	컴파일 단계 추가로 인한 빌드 시간 증가	순수 자바스크립트에 비해 빌드 속도가 느려질 수 있음
	소규모 프로젝트에서의 부담	간단한 스크립트, 프로토타입 수준에서는 오히려 비효율적일 수 있음

 

장단점을 나열해봤는데, 사실 단점도 열심히 끄집어 낸 느낌이 있지 않나 싶다.

 

19년도에 prettier를 사용하지 않아 코드 스타일 강제가 되지 않은 채로 코딩을 했을 때 이런 에러들을 몇시간동안 코드 한 줄 한줄을 눈알 빠지게 찾았던 기억이 있다. 

• 세미콜론(;) 하나가 콜론(:)으로 잘못 들어감
• 아이폰으로 작성하고 가져왔다가 이상한 따옴표가 들어감

이제는 ai도 있어서 딸깍하고 빠르게 에러를 찾을 수 있지만..

 

 

이런 관점으로 보면 타입을 미리 지정하여 알 수 없는 에러를 확실하게 줄이는 것이 좋을 것 같다.

 

 

 

 

참고

https://typescript-kr.github.io/pages/the-handbook.html