[배경지식] JavaScript? TypeScript? 이 둘의 차이는 무엇일까?

공통

객체 지향 프로그래밍 패러다임 = 데이터 추상화에 중심

- 객체와 클래스라는 두 주요 개념을 기반으로 한다

객체 기반의 스크립트 언어이다

웹의 동작을 구현하는 데에 쓰이는 언어이다

 

컴파일 타임?? 런타임??

소스코드(Input) -> 전처리기 -> 컴파일러 -> 어셈블러 -> 링커 -> 실행파일(Output) -> 실행
[-----------------------------------------컴파일타임---------------------------][---------런타임---------------]

동적 타입 언어는 런타임 시에 자료형이 결정

-> 소스코드 작성 시 자료형을 먼저 지정해 줄 필요는 없다

정적 타입 언어는 컴파일 시에 자료형이 결정

-> 소스코드 작성 시 자료형을 먼저 지정 해야 한다

---

JavaScript

• 동적 타입 언어이다
  • 런타임 속도는 빠르지만 안정성이 보장되지 않는다
• 타입을 명시 할 필요가 없는 인터프리터 언어이다
• 클라이언트 측 스크립팅 언어이다
• 프로토타입 기반의 객체 지향 언어이다
• 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 이 인터프리터가 내장되어 있다
• 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다

---

TypeScript

• 정적 타입 언어이다
  • 컴파일 시간이 걸리지만 안정성이 보장된다
  • 컴파일 단계에서 타입체크 -> 바로 버그를 캐치, 수정 -> 코드의 안정성 🆙
• JavaScript기반 언어
• 객체 지향 컴파일 언어
  • 전통적인 C계열의 컴파일 언어와는 차이가 있다
  • 브라우저에서 이해할 수 있도록 JavaScript코드로 변환하는 트랜스파일 언어라고도 불린다
• 오픈소스 프로그래밍 언어, 넓은 호환성을 지니고 있다
• 작동방식
  • TS -> compile(transpile) -> JS -> 실행
  • TS -> JS로 바뀔 때 helper 코드가 위아래로 추가되어 절대적인 코드의 양은 타입스크립트가 더 많다
  • 변환은 알아서 해주기에 문제되지 않는 부분이다
• class와 interface의 특징을 지원함으로서 완전한 객체지향 프로그래밍 환경을 제공한다
• javascript의 타입을 확장하고 타입 어노테이션을 이용해서 변수에 타입을 선언할 수 있게 한다
• ES6에서 제공하는 모듈 선언과 모듈 호출 방식을 지원한다
• MS에서 만든 언어답게 같은 회사에서 만든 vscode와의 궁합이 좋다
  • -> 개발환경 구축난이도 낮음
• 조기 버그를 감지할 수 있다

---

코드 비교

// JavaScript
function plus(a, b){
	return a + b;
}

// TypeScript
function plus(a: number, b:number){
	return a + b;
}

TypeScript > JavaScript

• 높은 가독성 - 타입 지정으로 인해 어떤 값이 들어가서 어떤 값이 출력되는지 알 수 있다
  • 사실 네이밍을 잘 하면 큰 문제가 되지는 않는다
• 컴파일 에러를 잡기 쉽다
• IDE(특히 VSCode)와의 결합성이 좋다
• 팀원과의 협업에서 더 적은 설명으로 코드를 이해시킬 수 있다

JavaScript > TypeScript

• 유연성이 높다 - 자료형을 바꿔가며 사용할 수 있다
  • TypeScript의 경우 이런 형식은 불가능하다
• TypeScript에 비해 더 짧은 코드로도 같은 기능을 실행시킬 수 있다
  • -> 더 빠른 코딩이 가능하다

---

End

 

 

 

참고자료

https://choseongho93.tistory.com/319

TypeScript와 JavaScript의 개념 및 차이점

https://velog.io/@pluviabc1/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90

자바스크립트와 타입스크립트 차이점

https://kid-dev.tistory.com/13

[typescript vs javascript] 어떤 언어를 써야할까? 이 글로 종결하자!