알아두면 좋은 TypeScript와 JavaScript의 차이점

안녕하세요 :)
 
TypeScript와 JavaScript는 웹 개발에서 자주 쓰이는 언어입니다. 특히 TypeScript는 JavaScript의 확장 언어로서, 코드의 유지보수성을 향상시킬 수 있는 언어입니다. 하지만, 많은 사람들이 '왜 TypeScript를 사용해야 하는지', '왜 TypeScript 코드를 JavaScript로 변환해야 하는지' 잘 모르는 경우가 많은 거 같습니다.

출처: https://medium.com/@mehran.hrajabi98/my-typescript-journey-2abb8d8d0ea8

 
이번 글에서는 TypeScript와 JavaScript의 차이점을 설명하고, 왜 코드의 변환이 이루어져야 하는지에 대해 다뤄보겠습니다. 먼저 두 언어가 무엇인지부터 간단히 살펴보도록 하겠습니다.
 

TypeScript와 JavaScript란 무엇인가?

프로그래밍 언어는 각각의 목적과 특징을 가지고 있습니다. TypeScript와 JavaScript는 웹 개발에 있어서 중요한 프로그래밍 언어이지만, 두 언어의 목적과 역할은 다릅니다. 비슷하면서도 다른 두 프로그래밍 언어의 차이점을 명확하게 알기 위해서 JavaScript란 무엇인지부터 간단히 짚고 넘어가겠습니다.

출처: https://dev.to/joelbonetr/to-ts-or-not-to-ts-that-is-not-the-question-4g7p

 
JavaScript란 무엇인가
JavaScript는 인터넷의 언어라고 불릴 만큼 웹 개발에서 중요한 역할을 하는 프로그래밍 언어입니다. 처음에는 웹 브라우저에서만 실행되도록 설계되었지만, 현재는 서버(Node.js)나 모바일 앱, 데스크톱 애플리케이션 등 다양한 환경에서 사용되고 있습니다.
 
JavaScript의 주요 특징은 크게 세 가지로 볼 수 있습니다.

1. 동적 타입 언어
   • JavaScript는 변수에 타입을 미리 지정하지 않아도 됩니다. 즉, 숫자를 담았던 변수에 문자열을 넣는 것도 가능합니다.
   • 이런 유연성 덕분에 빠르게 코드를 작성할 수 있지만, 때로는 타입 관련 오류를 실행 중에야 발견하게 될 수도 있습니다.
2. 즉시 실행 가능
   • JavaScript는 브라우저에서 바로 실행됩니다. 별도의 컴파일 과정 없이, 코드를 작성하고 새로고침하면 즉시 결과를 확인할 수 있습니다.
3. 웹 개발의 핵심 기술
   • HTML, CSS와 함께 JS는 웹 페이지의 동적인 동작을 담당합니다.
   • 예를 들어, 이벤트 처리, 실시간 데이터 처리, 애니메이션 등 모두 JS에서 처리 가능합니다.

간단한 JavaScript 예제를 한 번 보겠습니다.

const message = "JavaScript";
console.log(message);

• 이 코드는 콘솔에 "JavaScript"라는 메시지를 출력합니다. 브라우저의 개발자 도구에서 바로 실행해 볼 수 있습니다.

 
그렇다면 TypeScript는 무엇일까요?
TypeScript는 JavaScript의 Superset으로, Microsoft에서 만든 프로그래밍 언어입니다. JavaScript가 가진 단점을 보완하고, 대규모 애플리케이션 개발에 적합하도록 설계되었죠.
 
주요 특징으로는,

1. 정적 타입 언어
   • TypeScript는 변수나 함수의 타입을 명시적으로 지정할 수 있습니다.
   • 타입을 지정하게 되면 코드 작성 시점에서 타입 오류를 발견하고, 나중에 발견할 오류를 사전에 미리 방지할 수 있죠.
2. JavaScript로의 변환: 트랜스파일링
   • TypeScript는 실행되기 전에 JavaScript로 자동 변환됩니다.
   • 이 변환 과정을 "트랜스파일"이라고 부르며, 변환된 JS는 브라우저나 Node.js 위에서 실행됩니다.
3. 대규모 프로젝트 적합성
   • TypeScript는 코드의 가독성과 유지보소성이 뛰어납니다. 
   • 특히 여러 개발자가 협업하는 대규모 프로젝트에서 안정성을 확보하는 데 유리합니다.

TypeScript 예제도 한 번 볼까요?

const message: string = "TypeScript";
console.log(message);

• TypeScript에서는 message 변수가 반드시 문자열임을 명시적으로 선언했습니다. 덕분에 숫자나 다른 타입의 값을 넣으려고 하면 에러를 미리 알려줍니다.

 

TypeScript와 JavaScript의 관계

TypeScript는 JavaScript와 아주 밀접한 관계입니다. 간단히 말해보자면, TypeScript는 JavaScript에 "타입 시스템"과 "도구 지원"을 추가한 상위 언어입니다. 이 둘의 관계를 이해하고자하면 아래의 개념을 기억하면 좋습니다.

출처: https://radixweb.com/blog/typescript-vs-javascript

1. JavaScript의 상위 집합
   • TypeScript는 JavaScript의 모든 기능을 포함합니다..
   • 즉, 기존 JavaScript 코드는 그대로 TypeScript에서 사용할 수 있습니다.
2. 추가적인 기능
   • TypeScript는 정적 타입 검사, 인터페이스, 제네릭 등 JavaScript에는 없는 기능을 제공합니다.
3. 트랜스파일 과정
   • TypeScript는 실행되기 전에 JavaScript로 변환됩니다. 
   • 덕분에 TypeScript로 작성된 코드가 브라우저나 Node.js 환경에서도 문제없이 실행되도록 보장합니다.

 

어? 왜 굳이 TypeScript로 짜여진 코드를 JavaScript로 트랜스파일링 해야 하나요?

간단히 말하면, 브라우저나 Node.js가 TypeScript로 짜여진 코드를 이해하지 못하기 때문입니다. 즉, TypeScript는 JavaScript가 아니라는 소리이며, 둘은 엄밀히 말해 다른 언어라는 뜻이죠.

출처: https://medium.com/@tomideadeoye/convert-a-javascript-application-to-typescript-12046bedf953

 
조금 구체적으로 알아볼까요?

1. "브라우저와 Node.js는 JavaScript 실행 엔진을 사용하기 때문입니다."
브라우저와 Node.js는 JavaScript 코드를 실행하기 위해 JavaScript 실행 엔진(브라우저의 V8, SpiderMonkey, Node.js의 V8 등)을 사용합니다. 이러한 엔진은 ECMAScript(ES) 표준을 기반으로 JavaScript의 문법과 동작을 정의합니다.

하지만 TypeScript는 ECMAScript 표준이 아닙니다.
-> TypeScript는 JavaScript를 확장한 언어로, 정적 타입 시스템과 추가적인 문법을 포함합니다.
-> 브라우저나 Node.js는 ECMAScript 표준만 지원하기 때문에, TypeScript 고유의 문법(타입 선언, 제네릭 등)을 해석할 수 없습니다.

 

2. "TypeScript는 개발 도구를 위한 언어이기 때문입니다."
TypeScript는 개발자가 코드를 더 안전하고 효율적으로 작성할 수 있도록 돕는 일종의 보조 및 도구 언어입니다.

브라우저나 Node.js에서 실행하려는 목적보다는, 개발 과정에서 타입 검사, 에러 감지, 자동 완성 등의 기능을 제공하기 위해 설계되었기 때문입니다. 실행은 TypeScript 코드가 아니라, TypeScript에서 변형된 JavaScript 코드로 이루어집니다.

 

3. "컴파일 과정이 필수적이기 때문입니다."
TypeScript는 브라우저나 Node.js에서 실행 가능하도록 반드시 JavaScript로 변환, 그러니까 "컴파일"이 되어야 합니다. 이 컴파일 과정을 "트랜스파일(Transpile)"이라고 부르며, TypeScript 컴파일러인 tsc가 이 작업을 수행합니다.

TypeScript 예시 코드

const message: string = "TypeScript";
console.log(message);

컴파일된 JavaScript 코드

const message = "TypeScript";
console.log(message);

이처럼, TypeScript는 실행 중에 필요 없는 타입 정보인 ':string'를 제거하고 순수한 JavaScript로 변환됩니다. 브라우저와 Node.js는 이 변환된 JavaScript 코드만 실행할 수 있습니다.

 

4. "TypeScript는 런타임이 아닌 정적 언이이기 때문입니다."
브라우저나 Node.js는 런타임 시점에 코드 실행만 처리하기 때문에, TypeScript의 타입 정보는 필요 없고 해석할 수도 없습니다. 

-> JavaScript는 런타임 언어입니다. 코드가 실행될 때 변수와 함수의 타입이 결정됩니다.
-> TypeScript는 정적 언어입니다. 실행 전에 타입을 확인하고 에러를 감지합니다.

 
 

정적 타입  vs 동적 타입

"타입"이란 변수, 함수, 또는 객체가 어떤 종류의 데이터를 다룰 수 있는지 정의하는 규칙을 말합니다. 
 
타입 시스템이라는 건 정확히 뭘까요?
타입 시스템은 프로그래밍 언어에서 데이터의 종류와 그 데이터가 어떤 연산을 수행할 수 있는지를 결정합니다.

출처: https://www.linkedin.com/posts/rajnish-kumar-343001177_static-activity-7093348988619284480-th9O/

 
타입 시스템은 크게 두 가지로 나뉩니다.

1. 정적 타입(Static Typing)
   • 타입이 컴파일 시점에 결정됩니다.
   • 변수나 함수의 타입을 미리 선언해야 하며, 잘못된 타입 사용은 컴파일 단계에서 에러로 잡힙니다.
   • TypeScript, Java, C++ 등이 여기에 속합니다.
2. 동적 타입(Dynamic Typing)
   • 타입이 실행 시점에 결정됩니다.
   • 변수나 함수에 타입을 명시할 필요 없이, 다양한 데이터 타입을 자유롭게 할당할 수 있습니다.
   • JavaScript, Python 등이 여기에 속합니다.

한눈에 알아보도록 표로 나타내보면 다음과 같습니다.

특징	동적 타입	정적 타입
타입 결정 시점	실행 시점(Runtime)	컴파일 시점(Compile-time)
타입 선언 필요 여부	필요 없음	필요함
유연성	높음	낮음
런타임 오류	발생 가능성 높음	발생 가능성 낮음
개발 도구 지원	기본 지원	다양한 지원
대규모 프로젝트 적합성	낮음	높음

 
개발자들이 개발할 때는, 표에서도 볼 수 있듯이 TypeScript가 선택되는 이유는 다음과 같습니다.

1. 런타임 오류를 사전에 방지할 수 있어 코드의 안정성이 대폭 높아집니다.
2. 타입이 명시적으로 정의되어 있어, 협업 시 서로의 코드 의도를 쉽게 파악할 수 있습니다.
3. 코드 규모가 커질수록 타입 시스템은 유지보수를 쉽게 만듭니다.

반면, 동적 타입(Runtime) 언어인 JavaScript는 빠르게 시작할 수 있고 유연하지만, 타입 관련 오류가 실행 중에 발견될 우려가 있기 때문에, TypeScript로 개발을 하되 JavaScript로 변환하여 실행시키는 것입니다.
 
 

끝내는 말

지금까지 TypeScript와 JavaScript의 관계부터, 타입 시스템의 차이까지 알아보았습니다. TypeScript는 대규모 프로젝트에서 코드의 안정성을 높이고, 효율을 극대화시킬 수 있는 언어입니다. 하지만 브라우저나 Node.js는 TypeScript를 실행할 수 없기 때문에, 반드시 JavaScript로 변환하는 트랜스파일 과정을 이루어져야 한다는 점도 알아보았습니다.
 
글을 읽고 궁금증이 조금 풀리셨으면 좋겠습니다 ㅎ.ㅎ
 
읽어주셔서 감사합니다 :)