[TypeScript] 환경설정

비주얼 스튜디오 코드가 다운로드 되어있는 상태를 전제로 시작하겠습니다. 

 

우선 시작 전, 필수는 아니지만 유용한 Extension을 다운받아 보겠습니다.

1️⃣ 'Prettier - Code formatter'

코드를 읽기 쉽게 해주는 역할을 합니다. 

 

2️⃣ 'ESLint' 

코드의 품질 도구입니다. 코드를 검사하고, 잠재적인 문제에 대해 경고를 줍니다. 

 

3️⃣ 'Bracket Pair Colorizer 2'

괄호에 짝을 맞춰 색별로 구별해줍니다. 

 

 

---

본격적으로 타입스크립트 환경 설정을 시작해보겠습니다. Node.js는 다운로드되어 있는 상태를 전제로 시작하겠습니다. 

 

1️⃣  컴파일러 다운로드

타입스크립트 파일을 -> 자바스크립트로 컴파일해주는 컴파일러(tsc)를 다운받아보겠습니다. 

우선

npm i -g typescript

를 해주면되는데, 

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/typescript'

권한 부족 오류가 떠서 관리자 권한으로 다운받는 다는 의미로

sudo npm install -g typescript

이렇게 입력해주면, 맥북의 비밀번호 입력 시 다운로드를 받을 수 있습니다.

 

2️⃣  파일 생성 및 코드 작성

app.ts

function logName(name : string){
    console.log(name);
}

logName('kky');

 

3️⃣  코드 실행

tsc app.ts

터미널에서 이 명령어로 app.ts을 실행할 수 있습니다.

그렇게 되면, ts파일이 번역되어 js파일이 새로 생겨납니다. 

node app.js

그러고 나서 그렇게 생성된 js파일을 실행 시켜주면 됩니다. 

 

❗️그런데 매번 실행할 때마다 두번씩 명령어를 입력하기 쉽지않잖아요!

tsc -w app.ts

이 명령어를 실행시켜봅시다. 

그러면 터미널이 종료되지 않고 계속 실행되며 app.ts가 수정되는 것을 감시해줍니다.

app.ts가 수정되어 저장되는 즉시 app.js가 수정되어서 수고로움이 줄어듭니다. 

 

이 명령어가 실행된 터미널을 두고, 새로운 터미널을 연다음, 거기서 node app.js만 실행해주면됩니다. 

 

이 명령어를 입력하면 

tsc --init

 

tsconfig.json 파일이 생성이 됩니다. 

이 파일은 타입스크립트(TS)를 자바스크립트(JS)로 번역할 때, "어떤 스타일로 번역할지" 결정하는 설정 파일입니다.

현재 필요하지 않은 코드들은 주석이 되어있기 때문에, 그때그때 필요할 때마다 주석을 취소하며 사용할 수 있습니다.