TypeScript 타입스크립트 세팅 방법

* 아래의 글은 JavaScript 프롤로그 및 목차를 먼저 읽으신 후 읽으시기를 권장합니다.

---

본 글에서 다룰 내용

• 타입스크립트 세팅 방법

---

아래의 글에서는 타입스크립트 설치부터 기초 세팅 과정을 다룹니다.

 

저는 Visual Studio Code를 에디터로 사용합니다😁✌

 

왜 TypeScript를 사용하는데 세팅이 필요한 것인가?

Node.js는 TypeScript를 이해하지 못하기 때문에 TypeScript를 JavaScript로 컴파일 해주어야합니다.

---

제일 먼저 타입스크립트를 설치합니다.

 

yarn global add typescript

저는 이 프로젝트 외에 다른 프로젝트에서도 TypeScript를 사용할 것이기 때문에 global로 설치했습니다.

---

최상위 위치에서 tsconfig.json 파일을 생성합니다.

 

여기서 tsconfig.json은 TypeScript에게 어떻게 JavaScript로 변환하는 지 알려주면서, 몇몇 옵션을 설정해줍니다.

 

tsconfig.json파일의 설정은 아래와 같이 합니다.

 

tsconfig.json

 

• "module" : "commonjs" - node.js를 평범하게 사용하고, 다양한 걸 import하거나 export할 수 있게 만들어줌
• "target" : "ES2015" - 어떤 버전의 JavaScript로 컴파일 되고 싶은 지 적는 부분이다.(본 글에선 ES6사용)
• "sourceMap" : true - sourcemap 처리를 하고싶은 지 알려주는 부분.
• "include" : [] - 어떤 파일들이 컴파일 과정에 포함되는지 TypeSciprt에게 알려주는 부분, 컴파일 과정에서 포함할 파일의 배열을 적으면 된다.
• "exclude" : ["node_modules"] - node modules를 설치하지 않아도 디폴트로 제외해놓는것이 좋음

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다.

추 후 Webpack에서 자세히 다루도록 하겠습니다.

 

tsconfig.json에 추가 할 수 있는 옵션은 위에 적힌 것들보다 훨씬 많습니다.

인터넷에 tsconfig.json에 관한 자료들이 많으니 찾아보시는 걸 추천드립니다.😁

 

---

tsconfig.json파일 설정이 끝나면 자신이 원하는 ts파일을 생성 후 코드를 작성한 뒤 tsc 명령어를 입력합니다.

 

tsc 명령어

여기서 tsc 명령어의 역할은 ts파일에 있는 코드를 컴파일해서 js파일과 js.map파일을 만들어줍니다.

---

yarn start명령어 사용.

 

package.json

yarn start를 사용하려면 package.json에서 scripts를 설정해주어야 합니다.

• "start" : "node index.js" - typescript에서 javascript로 컴파일 된 js파일을 실행시킵니다.
• "prestart" : "tsc" - "start"를 하기 전 typescript파일들을 javascript파일로 컴파일 시켜줍니다.

 

이러한 과정을 거치면 여러분들은 typescript로 코딩을 할 수 있습니다😁

---

참고 문헌 및 사이트

 

노마드코더 Build a blockchain with Typescript - https://www.youtube.com/watch?v=-dyrcJr5NiQ&list=PL7jH19IHhOLNM5mePXxbpnPefi6PiiNCX&index=2

Typescript handbook - https://typescript-kr.github.io/pages/tsconfig.json.html

 

긴 글 읽어주셔서 감사합니다😀