TypeScript

타입스크립트는 자바스크립트의 SuperSet!
-> 타입스크립트는 자바스크립트의 모든 기능을 포함한 녀석이다!

TS vs JS

Type
TS -> 정적 타입
JS -> 동적 타입

이게 대체 먼소리지 ??

• JS 는 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당이 가능하다.
  그런데, TS는 어떤 변수에 한번 타입을 할당하면 다른 타입을 할당 할 수 없다 !!!

-> 이 때문에 TS는 어떤 변수가 들어가야 하는지, 도출되는 것이 어떤 타입인지 알 수 있다.

Time

TS 는 변수의 타입이 컴파일타임에 결정된다.
JS 는 변수의 타입이 런타임에 결정된다.

컴파일타임? 런타임?

• 컴파일타임 : 작성한 소스코드가 어떠한 것(js, binary 등..)으로 변환되는 과정
• 런타임 : 작성한 소스코드에 따라 프로그램이 실행되는 과정

IDE 에서는 컴파일 타임에서 에러가 날 상황을 빨간줄로 미리 알려준다.

따라서 JS는 우리의 프로젝트를 실행하기 전 어떤 오류가 있을지 알 수 없으나 TS는 에러가 날 상황을 미리 알 수 있다 !!

그렇다면 JS는 왜 쓰지??

TS 장점

• MS에서 만들었고, 꾸준히 업데이트 함
• 생태계가 큼 (구글링을 해보면 TS에 관한 글이나 질문이 굉장히 많음)
• MS에서 개발한 VSC와 잘 맞음
• 우리가 사용하는 대부분의 lib 에서 타입 정의 파일을 제공함
• 유지보수가 JS보다 유리함 (타입들이 모두 정의되어 있음)

TS 단점

• JS에 비해 어려움

JS 장점

• 다른 언어에 비해 쉬움
• 때문에 적은 양의 코딩을 할 때 쉽고 빠르게 가능함

JS 단점

• 런타임 시 오류가 검출 (컴파일시 오류 검출 x)
• 프로젝트 사이즈가 커지면 유지보수가 어려움

TS의 유지보수가 유리한 이유!

const person = {
	name : 'js',
  gender : 'man'
}

• 정적 타입 언어인 TS는 IDE에서 person의 타입을 알기에 에러를 발생시킴 (JS에서는 에러 발생 x)
• TS에서는 person 내에 어떤 속성이 있는지 정해주었기 때문에 자동완성을 쓸 수 있음

TS 설치하기

전역적으로 TS 설치하기
npm install -g typescript
npx create-react-app 원하는이름 --template typescript

위 코드로 TS를 전역으로 설치할 수 있다. (-g 는 global)

그 후 npx cra (ts) 를 통해 TS 프로젝트를 시작하면 된다 !