아하 로고
검색 이미지
생활꿀팁 이미지
생활꿀팁생활
생활꿀팁 이미지
생활꿀팁생활
하얀고슴도치236
하얀고슴도치23620.06.11

자바스크립트와 타입스크립트의 차이점은 무엇인가요??

자바스크립트와 타입스크립트의 차이점은 무엇인가요??

  • 가장 큰 차이점이라고 하면 동적 타입 vs 정적 타입 언어라는 차이입니다. 조금 더 얘기하자면 타입을 코드를 작성할 때 결정할지 (컴파일 단계), 아니면 프로그램을 실제로 돌렸을 때 결정할 건지 달렸습니다.

    자바스크립트는 동적 타입 언어입니다. 말 그대로 타입이 얼마든지 변할 수 있습니다. 그리고 좀 더 배우기 쉽고 코드량도 적습니다.
    다만 큰 단점은 코드를 컴파일 단계에서 100% 확신할 수 없어서 타입 에러가 정말 자주 일어납니다. 자동 완성도 잘 안됩니다. 타입을 100% 확신할 수 없기 때문이죠.

    타입스크립트는 정적 타입 언어입니다. 코드를 작성할 때 타입을 정합니다. 타입 에러로 인한 문제를 사전에 방지할 수 있어 정적 타입 언어에 비하면 코드 안정성이 높습니다.

    // 자바스크립트 let myVariable = " Hello, Javascript! " myVariable.trim() console.log(myVariable) // "Hello, Javascript!" myVariable = 10 myVariable.trim() // 런타임 에러. 프로그램을 돌리면 이 라인에서 에러가 발생. trim() 함수는 string 타입에서만 사용 가능하기 때문이지만 코드 작성 단계에서 에러를 발생시키지 못합니다. // 타입스크립트 let myVariable: number = 10 myVariable = "Hello, Typescript!" // 컴파일 에러. 코드를 작성할 때 에러를 발생시킵니다.


  • 타입스크립트는 자바스크립트의 슈퍼셋이라고 할 수 있습니다.

    자바스크립트는 기본적으로 동적인 언어인데 여기에 정적 타이핑을 지원해 주는게 가장 큰 차이점입니다.

    동적인 타입은 장점도 있겠지만 단점이 더 큽니다. 타입이 바뀌는 상황에서 이게 어떤 타입인지 명확해지지 않고 개발자를 혼란스럽게 할 수 있습니다. 그만큼 디버그나 테스트는 복잡해지고 힘들어집니다.

    타이핑 지원은 개발자의 유지보수 시간을 줄여주고 더 나은 코드 퀄리티를 유지하도록 도와줍니다.

    타입스크립트는 높은 수준의 도구 지원을 받을 수 있습니다.

    웹스톰 또는 vscode 같은 에디터에서 인텔리센스, 코드 어시스트, 타입 체크, 리팩토링 등을 깔끔하게 지원받을 수 있습니다.

    타입스크립트는 클래스에 대해 더 확장된 기능(인터페이스, 제네릭 등..)을 제공합니다.

    그 외 ES Next도 지원하고 있어서 저번 3.7버전에서는 옵셔널체이닝이라는 강력한 기능이 추가되기도 했습니다.

    앞으로 자바스크립트에 추가될 유력후보를 먼저 안전하게 사용해 볼 수 있겠습니다.

    참고로 타입스크립트는 현재 바로 돌아갈 수 있는 환경이 deno뿐입니다.

    deno도 아주 최근에 1.0 버전을 릴리즈했고

    브라우저단에서는 여전히 자바스크립트만 돌아가기 때문에 tsc(타입스크립트 컴파일러)를 통해 트랜스파일링을 해줘야 합니다. (물론 node도 마찬가지)

    예전 앵귤러 2버전에서 타입스크립트를 채택하면서 같이 발전해왔는데요, 계속 인기가 오르고 있고 deno도 나온걸 보면 앞으로도 사용자는 늘어날 겁니다.

    공부는 https://typescript-kr.github.io/ 여기를 추천드립니다. 한글화가 잘 되어있는 타입스크립트 핸드북입니다. 한번 살펴보세요 ㅎㅎ


  • 이름 그대로 타입 시스템이 들어갑니다. 자바스크립트에서는 변수에 어떠한 자료형이든 자유롭게 넣고, 자유롭게 수정할 수 있지만(const가 아니라면) 타입스크립트에서는 (any가 아닌 이상) 한 변수에는 하나의 자료형만 들어갑니다. 타입이 있을 때의 장점은 에디터나 tsc같은 툴로 미리 타입에 관한 코드 검사를 할 수 있습니다. 자바스크립트 코딩을 하다보면 많은 에러가 타입을 틀리거나 null, undefined의 property에 접근하는 허무한 에러입니다. 타입스크립트를 사용하면 null, undefined도 다른 타입과 명확하게 구분할 수 있기 때문에 이러한 에러가 발생하지 않습니다. 자유도는 줄어드는 대신 앱의 안정성이 올라갑니다.

    타입스크립트도 자바스크립트 기반으로 동작하므로 자바스크립트를 알고 있다면 타입스크립트를 쉽게 익힐 수 있습니다.


  • 자바스크립트는 웹브라우저나 node.js 등 에서 사용되는 스크립트 언어입니다.

    자바스크립트는 약타입 언어로 경우에 따라 실행 중간에도 동적으로 타입이 변화하기 때문에
    중간중간 에러를 예측하기 어려운데,

    타입스크립트는 그 자바스크립트의 슈퍼셋으로 정적 타입개념을 추가한 문법을 제공합니다.

    정적 타입을 추가한 결과 에러체크, 자동완성 등 여러 편의성을 제공하며,
    결과적으로 자바스크립트 파일로 컴파일되어 실행됩니다.

    이를 쉽게 도식화 하면,

    타입스크립트 -> 자바스크립트 -> 런타임