TypeScript를 왜 사용할까?
채용공고를 보면 대부분의 기업에서 ‘TypeScript’를 사용할 수 있는 인재를 원하며, 사용한다.
2022년 스택 오버플로우에서 2022년 전 세계 6만 5천 명의 개발자를 대상을 실시한 설문조사에 따르면 TypeScript는 개발자가 가장 좋아하고 관심을 가지고 있는 프로그래밍 ‘언어 5위’에 올랐다.
TIOBE 소프트웨어는 2024년 주목할 언어 중 하나로 TypeScript를 선택했다.
TypeScript는 무엇이며, 이러한 이유가 무엇일까?
TypeScript 란?
2012년 마이크로소프트가 개발한 ‘TypeScript’는 JavaScript 기반의 정적 타입 문법을 추가한 ‘프로그래밍 언어’이다.
TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있다.
(참고) 컴파일에 대하여
TypeScript를 사용하는 이유
1️⃣ 손쉽게 버그를 예방할 수 있는 강력한 타입 시스템
TypeScript의 정적 타입 기반, 즉 컴파일을 하는 과정에서 타입을 결정하게 된다.
변수에 들어갈 값의 형태에 따라 자료형을 지정해 주어야 하는데, 컴파일 시 자료형에 맞지 않은 값이 들어가 있으면 컴파일 에러를 발생시킨다.
이는 컴파일 에러를 예방할 수 있을 뿐 아니라, 손쉬운 디버깅이 가능해진다. 실제 연구에 따르면 모든 JavaScript 버그의 15%가 사전에 TypeScript로 감지할 수 있다고 한다.
2️⃣ 같은 일을 두 번 하지 않는다, 높은 생산성의 타입 스크립트
JavaScript로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야 했지만, TypeScript를 사용한다면 변수의 이름뿐만 아니라 그 데이터의 자료형까지 알 수 있게 된다. 그래서 코드 작성을 쉽고 직관적으로 할 수 있다.
또한, 객체 안의 필드값을 다 기억할 필요 없이 IDE가 자동으로 리스트 업을 해주기 때문에 생산성에도 큰 기여를 한다.
이처럼 타입 에러를 방지함으로써 리팩토링 후 예기치 않은 동작을 방지할 수 있다.
3️⃣ JavaScript의 슈퍼 셋, 호환성이 있다.
TypeScript는 JavaScript의 슈퍼 셋이다. 슈퍼 셋이란 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용 가능하도록 확장된 것을 말하는데, TypeScript를 적용하는 경우 기존의 JavaScript로 짜인 코드에 확장하는 식으로 대규모 수정없이도 TypeScript 적용이 가능하다.
TypeScript와 JavaScript 차이
1️⃣ 동적 타입 언어 vs 정적 타입 언어
동적 타입 지정이란, 변수의 타입이 런타임, 즉 실행 시간에 결정되는 것으로 JavaScript는 대표적인 동적 타입 언어이다.
배우기 쉽고 유연한 장점이 있지만 동시에 런타임 에러 발생 가능성을 지니고 있다. 실제로 거대한 규모의 프로젝트에서 의존성이 있는 모듈을 변경했을 때, 다른 모듈에서 에러가 발생하는지 개발 도중에는 알기가 쉽지 않다.
하지만 TypeScript는 정적 타입 언어로 변수의 타입을 명시적으로 지정해서 사용한다. 컴파일 단계에서 타입 체크를 하기 때문에 코드 작성 중 타입 오류를 방지하는 타입 체킹 가능인 ‘타입 어노테이션’을 활용하여 에러를 빠르게 발견할 수 있게 도와주기 때문에 코드를 수정하고 나서 버그가 생기는 것을 방지할 수 있다.
2️⃣ 컴파일 언어 VS 인터프리터 언어
JavaScript와 TypeScript는 언어를 해석하는 과정에 차이가 있다.
Javascript는 인터프리터 언어인데, 인터프리터 언어란 소스코드를 한 줄 한 줄 읽어가며 명령을 바로 처리하는 언어로 코드가 즉시 실행되기 때문에 컴파일 언어에 비해 빠르다는 장점이 있다.
이에 반해, TypeScript는 ‘컴파일 언어’이다. 컴파일 언어란 소스코드 전체를 컴퓨터가 이해할 수 있는 기계어로 변환하는 언어로 변환과 실행이 따로 이뤄진다. 소스코드를 기계어로 번역하는 과정에서 인터프리터 언어에 비해 시간이 오래 걸리지만 런타임 상황에서는 모든 소스코드가 변환되어 있기에 빠르게 실행할 수 있다.
프로젝트가 규모가 커질수록 JavaScript로 짜인 프로젝트에서는, 해당 데이터의 자료를 알기 위해 여러 파일을 오가며 불필요한 시간을 써야 하는 반면, TypeScript는 빠르게 데이터 구조를 파악할 수 있어 유용하게 활용할 수 있다.
TypeScript의 단점
1️⃣ 초기 세팅의 어려움
TypeScript의 단점으로는 먼저 초기 세팅이 어렵다는 점이 있다. TypeScript는 독자적인 언어가 아니기 때문에 기존의 JavaScript 엔진에서 실행된다. 이를 위해 기본적으로 설치해야 하는 모듈들이 있고, 컴파일을 하기 위한 옵션들도 설정해야 한다.
이를 보완하기 위해 ‘Create React App’, ‘Vue CLI’, ‘Angualr CLI’ 초기 세팅 도구를 활용할 수 있다. 이 도구들은 TypeScript를 기본적으로 지원하고, 프로젝트 구조와 컴파일 옵션을 자동으로 설정해 주어 보다 편리하게 사용할 수 있다.
2️⃣ 타입 지정으로 인한 생산성 저하 우려
TypeScript가 익숙하지 않은 개발자라면 생산성이 낮아질 수 있다. 매번 타입을 지정해줘야 하는 번거로움과 타입 어노테이션으로 인한 타입 에러로 실제 개발보다 타입을 지정하는 데 시간을 더 할애할 수 있기 때문이다.
게다가 TypeScript에서 제공하는 interface, class 등에 매번 변수명을 지정하면서 길어지는 변수명과 관리 포인트가 늘어나기 때문에 TypeScript의 사용이 익숙하지 않은 개발자일 경우, 생산성이 저하될 수 있다.
이럴 경우 React나 컴포넌트 기반 개발을 지원하는 라이브러리 또는 프레임워크를 함께 활용한다면 생산성이 저하되는 것을 보완할 있다.
TypeScript와 호환성 좋은 프레임워크
React
React는 TypeScript와 잘 융합되어 있으며, @types/react와 같은 타입 정의 라이브러리를 통해 타입 정보를 제공한다. TypeScript로 React 애플리케이션을 개발할 때 생산성과 코드의 안정성을 동시에 확보할 수 있다.
Angular
Angular는 TypeScript를 공식 언어로 지원하는 ‘프레임워크’이다. 그래서 Angular와 TypeScript를 함께 사용하는 것은 보편화되었다.
또한, Angular의 타입 시스템을 활용하여 강력한 타입 체크와 의존성 주입을 활용하여 큰 규모의 프로젝트에서도 데이터의 자료형을 금방 찾을 수 있고, 이를 통해 타입과 관련하여 휴먼에러를 방지하여 단단한 애플리케이션 구축을 돕는다.
Vue.js
Vue.js 역시 TypeScript를 공식적으로 지원하며, vue-class-component와 같은 라이브러리를 활용하여 Vue 컴포넌트를 클래스 기반으로 작성할 수 있고 Vue는 React에 비해 사용하기 쉬워 쉽게 프로젝트를 구성할 수 있는 장점이 있다.
NestJS
NestJS는 Node.js의 백엔드 애플리케이션을 위한’ 프레임워크’로, TypeScript를 기본적으로 지원하며 강력한 의존성 주입, 모듈 시스템 등을 제공하는 데 이를 통해 코드의 모듈화 수준을 높이고, 개발자들은 더 작고 관리하기 쉬운 모듈로 애플리케이션을 구성할 수 있다.
의존성 주입은 클래스가 직접 객체를 생성하는 것이 아니라 외부에서 필요한 객체를 주입받아 사용하는 패턴을 의미한다. 이로써 코드의 유연성이 증가하며, 테스트도 용이하게 활용할 수 있다.
Next.js
Next.js는 리액트 기반의 프레임워크로서, TypeScript를 공식적으로 지원하며 서버 사이드 렌더링과 같은 다양한 기능을 활용할 수 있다.
- 🔗 ref :