JavaScript vs TypeScript

자바스크립트와 타입스크립트의 차이점에 관하여 곰곰히 생각해보았다.

일단 내가 아는 선에서는 타입스크립트는 초반에 타입을 선언하여 체계적으로 코드 관리를 하고

자바스크립트는 변수 선언시 let var const등 여러가지를 쓰면서 시시각각 타입을 변경하는데

이로 인해서 나중에 런타임시 페이지는 랜더링이 되지만 결국에 오류가 일어난다고 알고 있다.

​

자 그럼 차이점을 찾아보자

왜 협업의 대부분이 타입스크립트를 이용할까?

​

웹하면 초반에 배우는 언어가 무엇인가 가장 널리 퍼진 자바스크립트이다

​

​

JavaScript

​

• 동적 타입 언어 → 변수의 타입을 선언하지 않아도 되고 런타임에서 타입이 결정됨.
• 장점 : 유연하고 배우기 쉬움 브라우저에서 바로 실행 가능.
• 단점 : 코드가 커지거나 협업 프로젝트에서는 타입 관련 오류가 런타임에 나타나 디버깅이 어려움

let x = 10; 값을 number x = "hello"; // string으로 재할당 가능함

​

 

TypeScript

​

• 자바스크립트의 상위 집합 → JS에서 할 수 있는 건 모두 TS에서도 가능
• 추가 기능 : 정적 타입 검사 → 변수, 함수 매개변수, 리턴값 등 미리 타입을 지정 가능

let x: number = 10; x = "hello"; // 컴파일 시점에서 오류 발생 타입 지정을 어김

 

• 장점 : 컴파일 시점 오류 확인 → 런타임 오류 감소 (초장부터 엄격히 체크해서 오류요소를 줄임)
• 대규모 협업 프로젝트에서 코드 안정성 ↑

​

예시로 들어 내가 동작을 하나 구현했다 치자

​

Javascript

const [count, setCount] = useState(0); setCount("hello");

애초에 count 값에 useState(0) 로 지정하여 Number로 넣어야되는데 보자면 애초에 페이지는 랜더링 되는데

해당 동작시 내부 로직이 깨질 수 있다.

​

Typescript

const [count, setCount] = useState<number>(0); setCount("hello");

해당 타입 스크립트 또한 number인데 이곳에 문자열을 넣게 되어 애초에 얘는 컴파일 단계에서 오류가 검출되며 실행이 안된다.

이를 통하면 협업 면에서는 빠르게 런타임 오류 가능성이 크게 줄어들며 효율적인 것이다.

​

​

그렇다 이것이 타입스크립트의 정체이다

지금 끌려가는게 잘 못 되어서 컴파일 과정에 차출당한 타입명이고

경찰관은 타입스크립트라고 볼 수 있다.

​

JS변수는 경범죄여서 그냥 스리슬쩍 빠졌는데 나중에 걸리는거고

TS변수는 중범죄여서 바로 적발당하는거다

예시로 공항에서 튀다 잡힌거랑 공항도 못가서 검열되어 잡힌거라고 볼 수 있다

​

이렇게 체포되고 싶지않으면 타입명을 지키기만하면된다.

​

​

​

애초에 타입스크립트는 코드 작성 시점에 타입을 명시, 그 타입 기준으로 오류를 미리 체크후 안전하게 자바스크립트 코드로 변환되어 브라우저에서 실행된다.

이리하여 자바스크립트의 상위 집합이라고 볼 수 있다.