VSCode 타입스크립트 컴파일러 설치 / 프로그램 실행

This is an excerpt from the book "DO it! 리액트 모던 웹개발" by 전예홍.

This is a study article I've written to document my own practice and summarize the content.

책 무지 좋습니다! 따라하면서 이해가 됩니다!!

VSCode 타입스크립트 컴파일러 설치 / 프로그램 실행

 

안녕하세요~

오늘도 어김없이 열심히 달려보겠습니다!

---

타입스크립트 컴파일러 설치하기

 

npm i -g typescript ts-node

타입스트립트 컴파일러는 실습에 꼭 필요하므로

다음 명령으로 제대로 설치됐는지 확인합니다.

tsc -v
ts-node -v

 

저는 C드라이브에 용량이 없어서 D로 설정해서 아래 캡쳐에는

D드라이브로 보이지만

여러분은 C로 보일거에요!

 

 

 

---

 

타입스크립트 프로그램 만들고 컴파일 하기

mkdir ch01/ch01_4/src

 

해서 아래와 같이 폴더를 만들고 index.ts도 생성해줍다!

 

 

index.ts에 아래 코드를 넣고 저장을합니다.

 

console.log("Hello ys world!");

 

실행시켜 봅니다!

ts-node src/index.ts

결과!

 

---

프리티어로 소스 정리해 보기

 

 

touch .prettierrc.js

 

아래 내용을 입력합니다!

module.exports = {
  singleQuote: true,
  semi: false,
}

 

 

이제 

index.ts 파일에서 마지막 줄에 엔터를 눌러

파일 내용이 변경되도록 저장하면

 

프리티어가 자동으로 동작하여 큰따옴표를 작은 따옴표로 변경하고

세미콜론이 제거된 모습으로 보입니다.

 

변경 전

 

 

!! 이때 저는 바로 적용이 안되었는데요

Ctrl + Shift + P 를 눌러

 

명령을 한번 실행했습니다.

그리고 프리티어 파일이

src 위 폴더에 있는지와

.prettierrc.js 파일명으로 앞에 . 이 잘붙어있는지 봐주세요!

 

 

그리고

// prettier-ignore

주석을 달아주면 이렇게 프리티어가 무시도 됩니다!

 

 

다만 프리티어 무시 주석은

타입스크립트 컴파일러의 타입 체크 기능을 무력화 하므로

개발이 끝난 코드에만 무시 주석을 적용합시다!

 

개발이 끝난 코드를 다시 수정해야한다면

무시 주석을 제거하여 타입스크립트 컴파일러가

인라인 컴파일 기능을 정상적으로 수행하도록 해줘야합니다.