Typescript Settings & How to use

Typescript Settings & How to use

---

0. 기본 설치가 필요한 것

nodejs, yarn, IDE(아무거나 상관없음 sublime / vsc 등등)

명령프롬프트를 실행하여 다음과 같이 nodejs 명령어인 npm으로 패키지를 설치한다

npm install -g yarn

아래 명령어들은 추후 tsc 명령어가 되지 않는 경우에만 추가 설치하도록 하자

npm install -g concurrently

npm install -g lite-server (live-server 인경우 live-server로 설치)

npm install -g typescript

---

1. 저장소 초기화

다음 명령어를 통해 저장소를 초기화 하자

yarn init

먼저 workspace 경로를 하나 잡아서 폴더를 생성한다.

해당 경로에서 yarn init 명령어 실행하여 package.json 파일을 생성한다.

안에 내용들은 간단히 작성하면된다. 자기소개 같은..?

yarn init 명령어를 실행하고 난후 workspace 폴더에

본인이 적은 (혹은 생략해서 기본값) 내용들이 들어간 package.json 파일이 생성되었을 것이다.

---

2. Typescript 패키지 추가

초기화를 마친 후 다음 명령어를 통해 typescript 패키지를 추가한다.

yarn global add typescript

---

3. Typescript 설정 파일 생성

Typescript의 기본 컴파일 설정을 할 수 있는 tsconfig.json 파일을 별도로 생성한다.

생성 후 다음과 같이 옵션을 추가한다.

구글링 해보면 tsconfig.json에 추가할 수 있는 옵션들이 상당히 많으니 궁금하면 별도로 공부하도록 한다.

tsconfig.json 파일은 어떻게 Javascript로 변환하는지 알려주면서 몇몇 옵션을 설정하는 파일이라고 보면된다.

compilerOptions -> 컴파일옵션

module -> 어떤 파일을 임포트 할것인지

target -> 어떤 버전으로 컴파일할것인지

sourceMap -> 소스맵 처리할 것인지

include -> 컴파일 과정에서 포함할 파일 배열

exclude -> 컴파일 과정에서 제외할 파일 배열

이렇게 하면 기본적으로 Typescript를 통한 개발 환경이 갖추어 졌다.

---

4. How to use

기본적으로 yarn start 명령어를 실행할 때 script를 추가할 수 있다

package.json 에서 다음과 같이 옵션을 추가한다.

scripts 옵션 중 각 옵션들은 아래와 같다.

start -> yarn start 명령어 수행 시 실행할 명령어

prestart -> 위의 start 명령어 수행하기 전에 실행할 명령어

Nodejs는 Typescript 형태의 파일 (.ts)를 자동으로 읽을 수 없기 때문에 tsc 명령어를 통해 Javascript 형태의 파일 (.js)로

컴파일 한 후 실행해야한다.

실행결과

---

설정 변경

package.json 및 tsconfig.json 수정

(이유 - 계속 yarn start 쓰는 것 및 tsc를 사용한 컴파일 되는 모습이 보기싫어서 계속 지켜볼 수 있는 tsc-watch로 설정할 것임)

다음과 같이 명령어를 통해 패키지 추가

yarn add tsc-watch --dev

패키지 추가 후 위와 같이 package.json을 설정한 뒤

workspace에 소스를 별도로 저장할 src 폴더와 배포판인 dist 폴더를 생성 후 아래와 같이 tsconfig.json 설정

"outDir" 를 "dist" 경로로

"include" 를 "src/**/*" 폴더 내 모든 것으로

그러고 난 후 yarn start 명령어를 한번 실행하면 tsc-watch가 실행되면서 실시간 변경을 감지하는데

만약 tsc-watch 에러가 나는 경우 아래와 같이 명령어를 통해 해결해보자

(2019-10-26 기준 typescript 경로를 yarn이 못찾음. 구글링결과 이미 오래전부터 있던 버그임)

yarn add typescript

추가 후 다시 yarn start하면 될 것이다. (그래도 안되면 또 구글링해서 에러 해결한 뒤 여기에 댓글 좀 부탁드립니다.)

---

위의 설명은 노마드코더의 Typescript로 Blockchain 만들기 강좌에서 나온 설명을 글쓴이가 정리한 내용이다.

출처 : https://academy.nomadcoders.co/courses/enrolled/303219

해당 사이트는 회원가입을 하면 무료로 수강이 가능하며 다른

다양한 강좌들은 약 300 달러로 판매 중

대표인 니콜라스가 운영하는 Slack도 있으니 필요하면 Join Us !

http://nomadcoders.slack.com/