Typescript란?
Typescript는 Javascript에 "타입"을 추가하는 정적 타입의 언어입니다.
즉, 프로그램을 작성할 때 미리 타입을 지정하여 버그를 사전에 방지하고 개발 시 발생할 수 있는 실수를 줄일 수 있다는 것을 의미합니다.
- Typescript는 Javascript 문법을 기반으로 변수나 함수 등에 타입을 명시할 수 있습니다.
- 이를 통해 코드를 작성할 때, 개발자가 의도하지 않은 버그를 사전에 방지할 수 있습니다.
이러한 기능들은 Typescript 컴파일러가 Javascript 코드로 변환하는 과정에서 호환성 문제가 발생하지 않도록 컴파일 됩니다.
따라서 Typescript는 Javascript의 확장된 버전으로 개발 생산성을 높이고 코드의 안정성을 높일 수 있습니다.
Typescript의 특징 및 장점
- 정적 타입 체크
Typescript는 Javascript에 존재하지 않는 정적 타입 체크 기능을 지원합니다.
즉, 변수나 함수에 타입을 명시하여 컴파일 시점에서 에러를 발견할 수 있습니다.
이를 통해, 런타임 에러를 줄이고 코드의 안정성을 높일 수 있습니다. - Javascript와 호환성
Typescript는 기본적으로 Javascript 슈퍼 셋
즉, 상위 확장자로 Javascript 엔진을 사용하기 때문에 기존 Javascript 코드를 Typescript로 쉽게 마이그레이션할 수 있습니다. - ES6+ 기능 지원
Typescript에서는 최신 Javascript (ECMAScript) 버전에서 추가되는 기능을 모두 지원하므로 개발자는 최신의 Javascript 기술을 사용할 수 있습니다.
Typescript의 단점
- 개발 초기 세팅의 불편함
Typescript는 독자적인 언어가 아니기 때문에, 기존에 존재하는 Javascript 엔진에서 실행됩니다.
이 때문에 Typescript 초기 세팅 시에 기본적으로 필요한 모듈들을 설치해줘야 하며, 컴파일하기 위한 옵션들도 설정해줘야 합니다. - 코드량이 늘어날 수 있음
정적 타입 시스템을 사용하기 때문에 변수 및 함수에 타입을 지정해줘야 하고, 이로 인해 Javascript 코드에 비해 가독성이 저하될 수 있습니다. - 컴파일 시간이 길다.
Typescript 코드 실행하기 위해서는 Javascript 코드로 변환하는 과정이 필요한데 이 과정에서 컴파일 시간이 길어질 수 있습니다.
Typescript와 Javascript
| Typescript | Javascript |
|---|---|
| 정적 타입 언어 | 동적 타입 언어 |
| 컴파일러 언어 | 인터프리터 언어 |
| 간결성, 일관성, 재사용성 | 유연성 (타입의 제한이 없음) |
| 의존적 실행 (Javascript) | 독립적 실행 |
| 큰 규모 프로젝트에 적합 | 작은 규모 프로젝트에 적합 |
| .ts 확장자 | .js 확장자 |
Typescript와 호환성이 좋은 프레임워크
- React
React는 Typescript와 잘 융합되어 있으며, @types/react와 같은 타입 정의 라이브러리를 통해 타입 정보를 제공합니다.
Typescript로 React 애플리케이션을 개발할 때 생산성과 코드의 안정성을 동시에 확보할 수 있습니다. - Angular
Angular는 Typescript에서 공식 언어로 지원하는 프레임워크입니다.
Angular 타입 시스템의 강력한 타입 체크를 활용하여 큰 규모의 프로젝트에서도 데이터의 자료형을 금방 찾을 수 있고, 이를 통해 타입과 관련하여 휴먼에러를 방지하여 단단한 애플리케이션 구축을 돕습니다. - Vue.js
Vue.js 역시 Typescript에서 공식적으로 지원하며, vue-class-component와 같은 라이브러리를 활용하여 Vue 컴포넌트 클래스 기반으로 작성할 수 있고, Vue는 React에 비해 사용하기 쉬워서 쉽게 프로젝트를 구성할 수 있는 장점이 있습니다. - NestJS
NestJS는 Node.js의 백엔드 애플리케이션을 위한 프레임워크로, Typescript를 기본적으로 지원하며 모듈 시스템 등을 제공하는데 이를 통해 코드의 모듈화 수준을 높일 수 있습니다. - Next.js
Next.js는 React 기반의 프레임워크로 Typescript를 공식적으로 지원하며 서버 사이드 렌더링과 같은 다양한 기능을 활용할 수 있습니다.
Reference
개발 중에 알게된 내용을 공유합니다 (나도 기억할겸)