📝 TypeScript란?
TypeScript는 JavaScript의 슈퍼 셋으로, JavaScript에 정적 타입 시스템을 추가한 언어이다. 이를 통해 변수의 타입을 명시적으로 지정할 수 있어 코드의 가독성과 안정성을 높이며, 유지 보수가 쉽고 오류를 사전에 방지할 수 있다.
컴파일 단계에서 에러 검출
JavaScript는 인터프리터 언어이지만, TypeScript는 컴파일 언어로 코드를 컴파일하는 과정에서 여러 가지 에러를 미리 검출한다. 이러한 특성은 개발자가 코드를 작성하는 동안 암묵적 형변환과 같은 JavaScript의 특징으로 발생할 수 있는 문제를 사전에 예방할 수 있도록 도와준다. 또한 호이스팅과 같은 JavaScript의 동작 방식에 따른 예상치 못한 동작을 미리 파악하여 코드의 안정성을 높이는 데 도움이 된다. 따라서 TypeScript는 코드 작성 과정에서 발생할 수 있는 복잡성 문제를 해결하여 개발자가 더욱 안전하고 효율적인 코드를 작성할 수 있도록 지원한다.
향상된 개발 생산성
TypeScript는 함수의 매개변수 개수가 잘못되었거나 다른 타입의 매개변수가 전달될 때 에러를 표시한다. 또한 코드 수정 시 문맥에 맞는 도움말을 제공하고, 코드 리팩토링을 용이하게 하는 다양한 기능을 IDE에서 지원한다. 이러한 기능들은 개발자의 생산성을 크게 향상시킨다.
최신 ECMAScript 기능의 활용과 브라우저 호환성
TypeScript는 낮은 버전의 ECMA 표준을 준수하면서도 최신 ECMAScript 기능을 활용하여 개발자가 더 효율적으로 코드를 작성할 수 있게 한다. 이를 JavaScript로 컴파일하면 모든 최신 브라우저와 호환되어 다양한 환경에서 일관된 동작을 보장하며, 크로스 브라우징 이슈를 최소화한다.
tsconfig.json파일의 compilerOptions => target 필드에 ES 버전 설정 가능
변환 가능 언어
TypeScript는 ECMA 표준을 준수하여 컴파일 도구를 이용해 기존 코드를 TypeScript로 변환할 수 있다. 또한 TypeScript 코드를 다른 언어로 변환하는 기능을 제공하고, 소프트웨어의 다양한 환경에서의 사용을 용이하게 한다. 이는 TypeScript가 다른 언어로의 마이그레이션을 효과적으로 지원하고, 기존 코드의 재사용성을 높이는 데 도움이 된다.
대규모 애플리케이션 개발 용이성
TypeScript는 JavaScript에 대비하여 대규모 애플리케이션 개발에 용이한 환경을 제공한다. 고급 기능인 인터페이스, 제네릭 등을 활용해 코드의 가독성과 유지 보수성을 향상시키며, 개발 초기 단계에서부터 문제를 쉽게 해결할 수 있어 프로젝트의 안정성과 품질을 보장한다.
TypeScript VS JavaScript
| 구분 | TypeScript | JavaScript |
|---|---|---|
| 개요 | 자바스크립트에 정적 타입 시스템을 추가한 언어 크로스 플랫폼 개발과 대규모 애플리케이션 개발에 적합 | 웹의 핵심 기술 중 하나로, 클라이언트 사이드 스크리트 언어 다양한 환경에서 사용 가능 |
| 오류 | 컴파일에서 타입 결정 / 오류 발견 | 런타임에서 타입 결정 / 오류 발견 |
| 장점 | 정적 타입 제공으로 코드 안정성 증가 대규모 프로젝트에 적합한 강력한 도구 및 기능 자바스크립트와의 호환성 더 나은 자동완성, 리팩토링 지원 | 브라우저에서 네이티브로 실행 유연하고 동적인 언어 특성 방대한 커뮤니티와 라이브러리 다양한 환경(브라우저, 서버, 모바일 등)에서 사용 가능 |
| 단점 | 추가적인 학습 필요 컴파일 단계가 필요 자바스크립트에 비해 런타임이 느릴 수 있음 | 타입 안정성 부족 대규모 프로젝트 관리에 어려움 런타임 에러 발생 가능성 높음 |
| 활용사례 | 대규모 웹 애플리케이션 개발 엔터프라이즈 레벨 프로젝트 개발자가 타입 안정성을 중요시하는 경우 | 소규모에서 중규모 웹 프로젝트 프로토타이핑 빠른 개발 필요시 서버 사이드(Node.js) 개발 포함한 다양한 환경 |
✍ JavaScript 대신 TypeScript를 선택하는 이유
// js-test.js
let count = 5;
count = "five"; // 런타임 에러 발생 가능
// ts-test.ts
let count: number = 5;
// count = "five" // 컴파일 에러: 'string' 타입을 'number' 타입에 할당할 수 없음JavaScript는 동적 타입 언어이기 때문에 변수에 타입을 지정하지 않아도 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있습니다. 이런 유연성 덕분에 빠르고 편리하게 개발할 수 있는 환경을 제공한다는 장점이 있지만, 런타임에서 예기치 않은 에러가 발생할 수 있다는 단점이 있습니다.
반면에 TypeScript는 정적 타입 시스템을 도입하여 이러한 단점을 보완합니다. 컴파일러가 코드를 실행하기 전에 대부분의 타입 오류를 미리 검출할 수 있어 코드의 안정성을 높입니다. 또한, TypeScript는 IDE에서 코드 완성, 리팩토링, 오류 감지 등의 기능을 제공하여 개발자가 더 효율적으로 작업할 수 있습니다.
또한, TypeScript에서는 JavaScript의 모든 기능을 포함하고, JavaScript 환경과 호환성을 유지하면서 인터페이스, 데코레이터 등과 같은 새로운 기능을 활용할 수 있기 때문에 대규모 애플리케이션 개발을 보다 적합하게 만들고 유지 관리를 쉽게 할 수 있습니다.
하지만 TypeScript를 사용하는 것은 타입을 지정하는 과정이 번거로울 수 있고, 코드 양이 증가하며 컴파일 단계가 추가되어 개발 속도에 영향을 줄 수 있습니다.
그러나 이러한 단점은 코드의 가독성과 유지보수성을 향상시키고, 예기치 못한 런타임 에러를 줄여줌으로써 장기적으로는 개발 생산성을 향상시킬 수 있습니다.
