<타입스크립트> 익스프레스, 타입스크립트로 마이그레이션

 

🎯

 

1. (선택) 타입스크립트 설치

$ npm i -g typescript

1. tsc 명령어를 사용하기 위해 typescript 전역으로 설치

2. 프로젝트 내에 설치해도 되며, 뒤에 설명하겠지만 프로젝트 내에 설치하는 것을 추천

 

2. 타입스크립트를 활용하기 위한 라이브러리 설치

$ npm i -D typescript ts-node @types/node @types/express 

1. typescript - npx tsc를 사용하기 위해 devDependencies에 포함 (팀원들과 동일한 ts 버전을 사용하기 위해 필요)

2. ts-node - Node.js를 위한 TypeScript 실행 엔진이자 REPL (TS 파일을 실행하면 JS 파일로 해석해서 실행 => node 명령어 + tsc 명령어처럼 동작)

3. @types/node - Node.js의 타입 정의

4. @types/express - express의 타입 정의

 

3. tsconfig.json 정의

$ tsc --init

tsc --init 명령어 실행시 tsconfig.json 파일 생성됨 (직접 생성해도 무방함)

[compilerOptions]

1. module - tsc가 컴파일할 대상의 형태 (모듈 시스템: CommonJS, ES2015 등)

2. target - tsc가 위의 대상을 컴파일해서 도달할 JS 버전 (ES2015, ES2016 등)

3. outDir - 컴파일로 생성된 자바스크립트 코드들을 출력(=저장)할 디렉터리 설정

[include]

1. "src/**/*" - tsc가 타입스크립트 파일을 찾을 디렉터리 ('/**/*'을 생략하면 중첩된 폴더 구조를 번역하지 못함)

 

4. 이후 할 일... 

1. (필수) 타입 오류난 부분 하나씩 수정

2. (선택) require => import로 수정 (module.exports => export const ... 수정)

2번은 TS2451: Cannot redeclare block-scoped variable 'OO'. ('블록스코프 변수 'OO'은 재정의 할 수 없음'.) 해결 방법입니다.

또는 해당 파일의 최상위 스코프에서 변수든 클래스든 하나라도 export 하면 해결됩니다.

export {} 와 같이 빈 객체를 export해도 에러 메시지는 나타나지 않습니다.

 

5. 변경전후 프로젝트 구조

<변경 전>
project
├── node_modules
├── src
│      ├── middlewares
│      │      ├── validator.js
│      │      └── ...
│      ├── models
│      │      ├── Post.js
│      │      └── ...
│      ├── routes
│      │      ├── postRouter.js
│      │      └── ...
│      ├── views
│      │      ├── mainPage.pug
│      │      └── ...
│      └── app.js
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

1. root 디렉터리에 tsconfig.json 생성

2. src 디렉터리 내 .js 파일 .ts 파일로 변경

3. npx tsc 명령어에 따른 dist 디렉터리 생성

4. src 디렉터리와 dist 디렉터리에서 템플릿 엔진 공유하기 위해 view 디렉터리를 root 디렉터리 아래로 이동

<변경 후>
project
├── dist
│      ├── middlewares
│      │      ├── validator.js
│      │      └── ...
│      ├── models
│      │      ├── Post.js
│      │      └── ...
│      ├── routes
│      │      ├── postRouter.js
│      │      └── ...
│      └── app.js
├── node_modules
├── src
│      ├── middlewares
│      │      ├── validator.ts
│      │      └── ...
│      ├── models
│      │      ├── Post.ts
│      │      └── ...
│      ├── routes
│      │      ├── postRouter.ts
│      │      └── ...
│      └── app.ts
├── views
│      ├── mainPage.pug
│      └── ...
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
└── tsconfig.json