Install

node와 npm이 설치되어 있다는 가정하에, 타입스크립트와 ts-node를 전역에 설치합니다.

sudo npm install -g typescript ts-node

설치 후, tsc -v를 터미널에 작성해보면 버전명이 나와야 잘 설치된 것입니다.
sudo를 안붙였더니 적용이 제대로 되지 않았습니다. 꼭 붙이세요!

compile

타입스크립트를 컴파일하면 일반 자바스크립트로 바꿔줍니다. 브라우저는 타입스크립트를 인식할 수 없기 때문에 이 과정이 필요합니다.

vscode settings

타입스크립트와 찰떡궁합인 vscode에서 타입스크립트를 더 효율적으로 사용하기 위해 몇 가지 패키지를 설치합니다.

cmd + shift + p를 누르면 command pallete가 나옵니다. (검색 창 같이 생긴)
입력칸에 'install path'를 검색하고 아래에 선택된 것을 선택!
이제 터미널에서 작업 파일 위치에서 code .이라고 치면 vscode가 실행됩니다!

extensions에서 prettier by Esben Petersen 설치
설정을 마치면 동일한 모양의 코드를 볼 수 있습니다.

• cmd + , 로 설정으로 들어가서 검색창에 format on save를 검색하여 활성화 체크
• 검색창에 'single quotes'를 검색하여 Prettier: Single Quote 활성화 체크
• 설정페이지에서 좀 내려가다보면 Editor: Tab Size 를 2로 변경