[TypeScript] 타입 스크립트? 그게 뭔데?

성 우·2022년 4월 14일
0

😹 그래서 타입스크립트 쓰는 이유가 뭔데?

JavaScript에서는 프로젝트의 규모가 커질수록, JavaScript만으로 작성된 프로그램이 개발자의 의도대로 동작하는지 확인이 어렵다는 한계가 존재합니다. 왜 그럴까요?

  1. JavaScript라는 언어 자체의 독특한 의미구조
    JavaScript는 다른 언어(e.g. Java)에서 사용하는 Class 기반의 OOP가 아닌, Prototype 기반의 OOP를 가지고 있습니다. 이는 this 키워드가 함수의 호출 방법에 따라 달라지는 등 개발자가 해당 함수의 문맥을 파악하기 어렵게 만듭니다.

  2. 정적 타입 체크의 부재
    C와 Java같은 정적 타입 언어의 경우 변수를 선언할 때 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 합니다. 그리고 컴파일 시점에 타입을 체크하고 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막습니다.

하지만 JavaScript는 동적 타입 언어로 변수의 타입은 선언이 아닌 할당에 의해 결정됩니다. 이로 인해 변수의 타입은 재할당 또는 JS엔진에 의해 언제든지 동적으로 변할 수 있습니다. 예를 들어 JavaScript에서 1 + '1'의 리턴값을 연산할 때 엔진에서 숫자 타입 1을 자동으로 문자열 타입으로 변환합니다. 그 때문에 '11'라는 보다 직관적이지 않은 결과가 반환되는 것 처럼 말이죠!

또한 정적 타입 언어와 달리 컴파일 과정에서 타입을 체크하기 않기 때문에 변수를 사용하기 전에는 타입을 확신할 수 없습니다. 이는 개발자의 의도와는 다르게 프로그램이 동작될 수 있으며 예기치 않은 에러를 발생할 확률을 높입니다.

위와 같은 한계 때문에 JavaScript를 기반으로 정적 타입 문법을 추가한 TypeScript가 탄생하게 되었습니다.

📘 타입, 타입 시스템, 타입 안정성(Type Soundness)

🌐 타입스크립트 사용을 고려해야하는 이유

높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있습니다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지할 수 있다고 합니다.

자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환됩니다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있습니다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도 빛을 발합니다.

강력한 생태계

타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있습니다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 비주얼 스튜디오 코드(VSCode)를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원합니다.

점진적 전환 가능

기존의 자바스크립트 프로젝트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 타입스크립트를 도입함으로써 프로젝트를 점진적으로 전환할 수 있습니다. 자바스크립트에 주석을 추가하는 것에서부터 시작해 시간이 지남에 따라 코드베이스가 완전이 바뀌도록 준비 기간을 가질 수 있습니다.

타입스크립트 1일차 학습한 내가 생각하는 타입스크립트의 장점.

차차...사용하다보면 장단점을 알게되겠지.....

현재 나의 상태.

📣 학습간 참고할 레퍼런스 자료!

[1] https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages-loved
[2] https://www.Typescriptlang.org/
[3] https://github.com/microsoft/Typescript/wiki/Performance
[4] https://v3.vuejs-korea.org/guide/Typescript-support.html
[5] https://ko.reactjs.org/docs/static-type-checking.html#Typescript
[6] https://serokell.io/blog/why-Typescript
[7] https://www.twilio.com/blog/move-to-Typescript#ts-compiler-for-js
[8] https://www.inflearn.com/course/타입스크립트-입문#
[9] http://it.chosun.com/site/data/html_dir/2018/07/24/2018072402352.html

profile
풀스택 개발자가 되고싶은 개발자

0개의 댓글