TypeScript는 JavaScript의 SuperSet(상위 확장) 언어로 JavaScript에는 없는 Type에 대한 문법을 제공하며, JavaScript와 1대1 매칭이 되는 컴파일 언어로서, JavaScript를 사용하는 곳이라면 TypeScript를 적용할 수 있다.
또한 컴파일 시점에 Type에 대한 체크를 진행하여 런타임 이전의 논리적인 오류를 확인할 수 있다.
JavaScript의 TypeScript의 차이점
| JavaScript | TypeScript |
|---|---|
| 동적타입 언어 | 정적타입 언어 |
| 인터프리터 언어 | 컴파일 언어 |
| 독립적으로 사용 가능 | JavaScript에 의존적(JavaScript로 컴파일 된 후 실행) |
| 타입에 제한을 받지 않으므로 좀 더 유연함 | 더 나은 구조와 간결함, 일관성, 재사용성 |
| .js 확장자 | .ts 확장자 |
| 작고 간단한 프로젝트에 적합 | 복잡한 프로젝트에 적합 |
TypeScript를 사용하는 이유
Type 안정성과 더 나은 개발 디버깅
코드 작성 시 데이터를 어떤 Type으로 지정할 것인지 미리 작성함에 따라 프로그램 실행 전에 미리 에러를 잡을 수 있다. 그래서 우리는 데이터가 어떤 Type으로 지정하는지 직관적으로 알 수 있다.
만약 함수에 어떤 인자값이 들어있는데 인자값이 어떤 Type을 수용하는지 모를 경우 우리는 그 함수를 찾아가서 함수의 코드를 분석해야 한다. TypeScript를 사용하면 이러한 문제가 있을 수 없다. 그래서 우리는 디버깅 과정에서 빠른 피드백을 경험할 수 있다.
크로스브라우징(브라우저 호환성) 문제 해결
모든 브라우저의 지원을 걱정해야 하는 프론트 개발자 입장에서 ES6+를 사용해도 될지 고민이 많다. 하지만 TypeScript는 컴파일 과정에서 ES6+ 문법들을 ES5(또는 ES3)로 바꿔주기 때문에 Babel의 도움 없이 크로스 브라우징 문제를 해결할 수 있다.
도구의 지원
TypeScript를 사용하는 이유는 여러 가지 있지만 가장 큰 장점은 IDE(통합개발환경)를 포함한 다양한 도구의 지원을 받을 수 있다는 것이다. IDE와 같은 도구에 Type 정보를 제공함으로써 높은 수준의 인텔리센스(IntelliSense), 코드 어시스트, 타입 체크, 리팩토링 등을 지원받을 수 있으며 이러한 도구의 지원은 대규모 프로젝트를 위한 필수 요소이기도 하다.
TypeScript 단점
복잡한 초기 설정
TypeScript를 사용하기 위해서는 tsconfig.json 파일을 통해 여러 가지 설정을 해야 하고, 기존에 사용하던 JavaScript 언어에 Type 정의를 추가해야 하는 작업과, 라이브러리별 추가 Type 라이브러리 설치 또는 정의 과정이 필요하다.
코드의 가독성
TypeScript는 모든 객체에 대해 Type을 지정해야 한다. 만약 Type을 지정하지 않는다면 추론해야 하는데, Type을 추론하기 힘든 경우 컴파일러에 알려주는 형 변환을 하거나 제네릭을 사용하여 어떤 타입이 들어오더라도 동작할 수 있도록 선언해야 한다. 이렇게 코드를 작성하다 보면 코드가 엄청나게 길어질 수 있다.
참고
