​​Reading Time 4분

먼저 내용에 들어가기 앞서, 타입스크립트에 대하여 알고 계셔야 합니다. 타입스크립트에 대하여 모르시다면, 먼저 타입스크립트 부터 공부하신 다음에 이 강의를 듣는것을 권장드립니다

왜 타입스크립트?

왜 타입스크립트를 쓸까요? 솔직히 그냥 개발하는데에 있어서는 자바스크립트 하나 만으로도 충분합니다. 하지만, 자바스크립트에서 타입이 존재하지 않기에, 개발하기에는 불안정한 면도 있습니다. 이를 위하여 나온 것이 타입스크립트입니다. 타입스크립트는 superset of javascript입니다. 타입스크립트는 자바스크립트의 상위버전입니다. 왜 상위버전일까요..?  타입스크립트는 기존 자바스크립트(ES6)에 타입과 제네릭, 인터페이스 등을 지원하면서 조금 더 좋은 코드를 짤 수 있도록 도와줍니다. 자 그러면 이제 타입스크립트 개발환경을 한번 구성해볼까요?

타입스크립트 환경 구성하기

먼저, 우리가 늘 자바스크립트 프로젝트를 구성했듯이 프로젝트를 만들어 줍시다

yarn init -y (OR) npm init -y

위와 같은 명령어를 입력하시면 package.json 파일이 생성되었을 겁니다. 그러면 이제 타입스크립트를 위한 패키지들을 설치해 볼까요? 그 전에 타입스크립트 패키지를 글로벌로 설치를 해줍시다

yarn global add typescript (OR) npm install -g typescript

이후에 타입스크립트 config파일을 추가해줍시다. 아래 명령어를 입력해주세요

tsc --init

그렇게 하시면 tsconfg.json이라는 파일이 생성될겁니다. 한번 속을 봐볼까요? 보시면 여러가지 주석들이 있을껀데 주석들에 달려있는 설명을 보시고, 필요하시다면 적용해주세용.

이후에 이제 타입스크립트 실행에 필요한 패키지들을 설치해줄까요?

yarn add -D @types/node typescript ts-node nodemon (OR) npm install --save-dev @types/node typescript ts-node nodemon

다운 받는 패키지들을 한번 살펴볼까요?

• @types/node : 타입스크립트 파일에서 node 기본 패키지들을 사용할 수 있게 해줍니다 예) fs
• typescript : 타입스크립트를 사용하는데에 있어서 가장 중요한 것입니다
• ts-node : 타입스크립트 파일을 실행하게 해줍니다
• nodemon : 우리가 개발하는데 저장을 할 때 마다 서버를 재실행해줍니다

위의 패키지들을 다 다운 받으셨다면, 이제 우리는 실행을 할 수 있도록 package.json의 스크립트를 설정해주도록 하겠습니다

// ./package.json

{
  (...)
  "scripts": {
    "dev": "nodemon --exec ts-node src/index.ts",
    "start": "ts-node src/index.ts"
  }
  (...)
}

위와 같이 작성을 해 주시고 한번 dev 명령어를 실행을 시켜보세요. 그러면 오류가 날겁니다. 왜냐하면 우리가 아직 타입스크립트 파일을 만들지 않았기 때문이죠. 그러면 한번 만들어줄까요?

mkdir src && cd src
touch index.ts

이후에 이제 다시 실행을 시켜 보시면 clean exist 이라며 잘 작동하는 것을 확인 할 수 있습니다. 그러면 이제 디스코드 봇을 추가해볼까요? 

discord.js 추가하기

Node.js에서 디스코드API를 쉽게 사용하게 해주는 패키지 discord.js 를 타입스크립트에서도 사용할 수 있습니다. 달라진건 단지 es6문법을 사용할 수 있다는 것이죠

yarn add discord.js (OR) npm install --save discord.js

이제 메인(src/index.ts) 파일을 수정해볼까요?

// src/index.ts

import Discord from 'discord.js';

const client = new Discord.Client();

client.login(토큰을여기에 넣어주세요)
  .then(() => console.log("봇이 준비되었습니다"));

이런식으로 써 주세요. 이후 다시 실행을 시켜주시면 봇이 잘 구동되는 것을 확인할 수 있습니다

다음시간

다음 시간에는 eslint와 prettier를 타입스크립트에서 사용해보도록 해보겠습니다