TypeScript 설치 방법 및 프로젝트 생성

1. TypeScript 설치 하기

npm 사용하기

npm install -g typescript

2. 프로젝트 생성

express --no-view backend 명령은 Express.js 애플리케이션을 생성하는 명령어입니다. 이 명령을 실행하여 애플리케이션을 생성하면 JavaScript로 작성된 애플리케이션이 생성됩니다.

그러나 TypeScript를 사용하여 Express.js 애플리케이션을 작성하려면 다음과 같은 추가적인 단계가 필요합니다.

1. 프로젝트 생성

기본 Directory 구조

  root/
  ├── dist/
  ├── node_modules/
  ├── src/
  │   ├── controllers/
  │   ├── models/
  │   ├── routes/
  │   ├── app.ts
  │   └── index.ts
  ├── .gitignore
  ├── package.json
  ├── tsconfig.json
  └── README.md

1. TypeScript를 설치합니다. npm install -g typescript

2. express --no-view backend 명령으로 Express.js 애플리케이션을 생성합니다.

3. TypeScript로 작성된 파일을 생성합니다.

4. TypeScript 설정 파일(tsconfig.json)을 작성합니다.

   • { 
           "compilerOptions": { 
               "outDir": "./dist", // 컴파일된 JavaScript 파일들이 저장될 디렉토리 경로를 설정합니다. 
               "module": "commonjs", // 컴파일된 JavaScript 코드의 모듈 포맷을 설정합니다 
               "target": "es6", // : 컴파일된 JavaScript 코드가 지원할 ECMAScript 버전을 설정합니다. 
               "lib": \["es6", "dom"\], // 컴파일된 JavaScript 코드에서 사용할 라이브러리를 설정합니다. 
               "sourceMap": true, // 소스 맵 파일을 생성할지 여부를 설정합니다. 
               "esModuleInterop": true // ES 모듈과 CommonJS 모듈 간의 상호 운용성을 개선하기 위한 TypeScript 컴파일러 옵션입니다. 
           }, 
           "include": \["src/\*\*/\*"\], // TypeScript 파일을 포함하는 디렉토리 또는 파일 패턴을 지정합니다. 
           "exclude": \["node\_modules"\] // 옵션은 컴파일하지 않을 파일을 지정합니다. 
     } 

5. 생성된 JavaScript 파일을 TypeScript 파일로 변환합니다.

6. TypeScript에 필요한 dependency를 설치 합니다.

   • npm i @types/express
   • npm i --save-dev typescript
   • npm i --save-dev @types/cookie-parser
   • npm i --save-dev @types/morgan

7. ts-node 설치

   • npm install ts-node --save-dev
   • 이유 : ts-node를 사용하면 TypeScript를 컴파일 하지 않아도 실행 가능하다

8. package.js > script > start 명령어 수정

   • "dev-start" : "ts-node src/index.ts",

2. js파일 .ts 파일로 변경

Raconer > Express_ts > feature/default_setting 을 참고 하시면 ts로 변경된 코드를 확인 할수 있습니다.