TypeScript
Javascript에 type 이라는 개념을 추가한 것
코드를 실행하기 전 타입스크립트는 에러를 잡거나 고치는데 시간을 절약해 준다.
타입스크립트도 하나의 프로그래밍 언어이다.
자바스크립트의 기능을 강화시키고 타입이라는 기능을 추가한 언어이다.
컴파일 과정을 통해서 실제 실행 환경에서 이해할 수 있는 자바스크립트로 변환을 해준다.
Javascript와 같이 interpreted 언어와 같은 경우에는 바로 런타임에서 실행하기 때문에 런타임시 에러를 확인할 수 있다.
TypeScript 같은 compiled 언어는 런타임 이전에 컴파일 되는 과정에서 에러를 잡아낼 수 있다.
타입스크립트를 작성하고 실제 우리가 사용하는 브라우저와 node 같은 런타임 환경에서 자바스크립트로 타입스크립트를 컴파일러가 변환하고 플레인 자바스크립트로 변환한다.
결론적으로 타입스크립트를 사용하는 이유는?
타입을 보장 받아 안정적인 소프트웨어를 만들수 있고 강력한 객체 지향 프로그래밍을 할 수 있어서 많은 개발자들이 사용하고 있다
설치 방법
맥북으로 설치하기 위해서
brew install typescript 실행
또 다른 방법으로는 터미널에
npm init -y
y플래그를 붙인 이유는 딱히 지정할 것이 없기 때문에 init 후 질문들에 모두 yes라고 대답하기 위해서
npm i typescript -g
사실 vs code 또한 타입스크립트로 만들어졌기 때문에 컴파일러가 모두 내장되어있다. 파일 확장자 명을 ts or tsx로 명시하면 된다.
간단한 변환 방법
일단 vs code에서 프로젝트 폴더 안에 확장자 명이 .ts인 파일을 하나 만든다.
main.ts라고 예를 들어보자
console.log("Hello World") 라고 작성하고 브라우저가 읽을 수 있도록 ts 파일을 js 파일로 변환 즉 transcompile 해보자
tsc main.ts
그럼 main.js파일이 생성된다.
node main.js
그럼 "Hello World"가 출력된다.
브라우저에서 확인하고 싶다면?
index.html 파일을 만들어서 script 태그로 main.js를 연결하여 live server를 통해 확인할 수 있다.
매번 변환하는 과정이 귀찮다면?
npm install -g ts-node
타입스크립트 코드를 자바스크립트로 변환해서 실행하는 과정을 한번에 할 수 있도록 도와주는 명령어
ts-node main.ts
라고 입력하면 타스 파일을 자스로 변환하는 동시에 코드를 실행하여 결과값을 보여준다.
코드가 변경될때 마다 이 과정을 거치기 귀찮다면?
tsc main.ts -w
watch 모드를 실행하면 터미널이 타스 파일이 바뀌는 것을 감시하고 변경된 타스 파일을 저장하는 순간 자스 파일에도 변경 사항을 적용하고 저장한다.
원래라면 타스를 수정하게되면 ts-node main.ts 과정을 또 거쳐야 하는데 번거로우니 저장만해도 수정된 사항이 업데이트 될 수 있도록 워치모드를 사용하자
브라우저에서도 바로바로 수정되는 사항을 확인할 수 있다.
중요 포인트!
📍 타입스크립트는 브라우저가 읽을 수 있게 자바스크립트로 컴파일을 해야한다.
