Language/TypeScript

TypeScript와 JavaScript의 비교

NANCEEE 2023. 8. 9. 21:14
반응형

타입스크립트는 MS(마이크로 소프트)에서 개발된 개발언어로 자바스크립트를 바탕으로 만들어 졌습니다. 자바스크립트의 단점을 보완해, 보다 개발자를 서포트 할 수 있는 언어로서 개발되었습니다. 그렇기에 기본적으로 자바스크립트와 유사한 모습입니다만, 어떤 부분이 보완되었는지, 그 특징을 정리해 보려고 합니다.

  1. 타입 설정
    • JavaScript: 자바스크립트는 동적인 언어로, 변수 선언 혹은 함수의 반환값이나 함수의 매개변수 등의 타입을 정의하지 않아도 됩니다. 변수의 경우, 값을 정의할 때 자동적으로 타입이 지정됩니다. 
        let test = 'a';
  test = 1; // test의 type은 any로 자동 지정됨
    • TypeScript: 타입스크립트는 정적인 언어입니다. 변수 선언 혹은 함수의 반환값이나 함수의 매개변수 등의 타입을 정의할 수 있습니다. 물론, 자바스크립트와 마찬가지로 타입을 정의하지 않고, 자동으로 설정하게끔도 가능합니다. 하지만, any 타입으로 자동 지정은 불가능 합니다. 
      let one = 'a'; // one의 type은 string으로 자동 지정됨 
// one = 1; // error발생: Type 'number' is not assignable to type 'string'.
let two: number = 1; // two의 type을 number로 지정 
two = 2;
// two = '3'; // error발생: Type 'string' is not assignable to type 'number'.
  2. 개발의 편의성
    • JavaScript: 타입에러의 경우 런타임 체크에 의존하기 때문에 실제로 코드를 실행할 때까지 오류를 탐지 하지 못할 수 도 있습니다.
    • TypeScript: 코드가 실행되기도 전에 오류를 탐지합니다. 코드의 품질향상과 런타임 오류를 줄일 수 있습니다.

      왼편이 타입스크립트. if문의 조건에서 타입에러를 표시하고 있습니다.
  3. 도구 및 IDE 지원
    • JavaScript: 타입 정보에 기반한 도구 및 IDE기능이 내장되어 있지 않습니다.
    • TypeScript: 타입 시스템에 대한 자동완성, 코드 탐색 및 리팩토링 제안과 같은 도구 및 IDE기능을 지원합니다.
  4. 호완성
    • JavaScript: 모든 최신 웹 브라우저와 호환되며, Node.js를 사용하여 서버 측에서 실행 할 수 있습니다.
    • TypeScript: 브라우저나 서버에서 실행하려면 먼저 자바스크립트로 변환해야 합니다. 프로젝트의 요구에 따라 다른 버전의 JavaScript(ES3, ES5, ES6 등)를 대상으로 할 수 있습니다.
  5. 구문 및 기능
    • JavaScript: DOM조작, 이벤트 처리, HTTP 요청 등을 포함한 웹 개발을 위한 기본 구성 요소를 제공하는 표준 스크립트 언어입니다. 표준 스크립트 언어이기에 컴퓨터에 기본적으로 내장되어 있습니다. 때문에 자바스크립트로 개발을 위해 따로 설치할 필요가 없습니다.
    • TypeScript: 타입스크립트는 자바스크립트로 개발된 언어로, 자바스크립트에서 유효한 코드는 모두 타입스크립트에서도 유효합니다. 또한 정적 Type, interface, enum 등의 기능을 추가하여 개발자가 보다 안정화된 코드를 작성할 수 있게 도움을 줄 수 있습니다. 타입스크립트로 개발을 하기 위해선 따로 설치를 할 필요가 있습니다.

타입스크립트는 보다 개발자 친화적으로 진화한 자바스크립트라고 생각합니다. 자바스크립트와 유사한 문법이기에 자바스크립트에 익숙한 프론트 개발자도, Java나 C와 같은 정적인 Type의 개념을 가지고 있기에 이러한 언어에 익숙한 백 개발자도 비교적 배우기 쉬운, 학습 코스트가 낮은 개발언어라고 생각합니다.

반응형