Typescript 시작하게된 계기✌️

그동안 Javascript를 쓰면서 Typescript를 한 번 써보라는 말을 많이 들었다.
마침 학교 졸업 프로젝트에서 백엔드를 개발해야 되는 상황이었는데, 팀원들과 회의를 한 결과 Typescript를 쓰기로 했기 때문에 미리 공부 하기 위해 시작하게 됐다.

Typescript를 선택한 이유

1. 팀원 모두 Javascript를 사용해 개발을 많이 해왔다.
2. Typescript는 타입을 명시적으로 선언 후 컴파일 할 수 있기 때문에, 컴파일 단계에서 잘못된 코드를 알 수 있는 경우가 있다.(컴파일 에러가 가장 좋다고 들었다....)
3. 프론트도 Typescript를 사용하기로 했다!
4. 한 번 써보고 싶었다🤜

이제 환경세팅 시작!

package.json 생성

작업하려는 디렉토리 생성 후 아래의 명령어를 실행 해 우리 서비스의 의존성을 관리해주는 package.json파일을 생성한다.

$ yarn init

package.json에서 우리가 사용하는 package들을 관리해주기 때문에,
나중에 yarn install 명령어로 필요한 package들을 설치할 수 있습니다.

yarn init을 치면 뭘 많이 물어보는데 entry point만 주로 사용하는 index.ts나 app.ts로 설정해주고 나머지는 그냥 enter로 넘겨도 무방하다.

필요한 package 설치

이제 기본적으로 필요한 package들을 아래의 명령어로 설치해준다.

$ yarn add -D express typescript ts-node nodemon @types/node @types/express

ts-node의 기능

• 기본적으로 .ts파일을 실행하려면 js로 컴파일 후 node [js파일] 명령어로 실행을 해야 한다.
  그러나 ts-node 라이브러리는 이러한 과정을 생략하고 바로 ts-node [ts파일] 명령어로 실행 가능하게 해준다.

-D 옵션

• 개발자 모드로 설치한다는 뜻인데 위와 같은 옵션으로 설치를 하게 되면 package.json에 devDependencies의 항목에 package들이 추가가 된다.
• 추후 yarn install 에 --production의 옵션을 줄 경우 devDependencies의 항목들은 설치가 안된다.
• 배포에 사용되는 패키지가 아니라 개발에만 사용하는 패키지의 경우 -D옵션을 붙여 yarn add를 하면 된다.

tsconfig.json 생성

ts-node의 기능에서 말한 것처럼 .ts파일을 실행하기 위해선 .js파일로 컴파일이 필요한데, 이때 컴파일 옵션을 설정하는 파일이 tsconfig.json입니다.
아래의 명령어로 생성할 수 있습니다.

$ npx tsc --init

아래와 같이 수정을 하시면 됩니다. 전 이렇게 했습니다!
옵션이 정말 다양하게 있는데 정말 정리를 잘 해주신 분이 계십니다 ㅎㅎ 본인 프로젝트에 맞는 옵션 설정을 해주시면 됩니다.

"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": ".",
    "strict": true,	
    "moduleResolution": "node",	
    "esModuleInterop": true,
     "jsx": "react"
  }

package.json의 script수정

package.json의 scipt항목을 아래와 같이 작성한다.

"scripts": {
    "start": "node dist/index.js", 
    "build": "tsc -p .", 
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
  }

src/index.ts파일 작성

src 디렉토리 생성 후 index.ts파일을 만든다.

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.get('/', (req: Request, res: Response, next: NextFunction) => {
    res.send('이제 캡스톤 시작...........................');
});

app.listen(3000, () => {
    console.log('Start Server with 3000 port');
});

실행

아래 명령어를 통해 nodemon으로 프로젝트를 실행할 수 있다.

$ yarn dev

아주 잘 실행된다!! 👏👏