typescript 프로젝트 기본 설정

Peter·2022년 10월 22일
0

typescript

목록 보기
2/2
post-thumbnail

1. 프로젝트 생성 및 tsconfig.json 설정

프로젝트를 구성할 root 디렉터리에서 아래 cmd 실행

$> npm init -y
$> npm i -D typescript
$> touch tsconfig.json

src 디렉터리를 만들고, 그 하위에 간단한 ts 코드 작성

const hello = () => 'Hello, Peter!';

(index.ts)

tsconfig.json 파일 설정

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "es6",
    "esModuleInterop": true,
    "lib": ["ES6"],
    "module": "CommonJS"
  }
}
  • include : 타입스크립트 파일의 위치를 명시해줌
  • compilerOptions : ts -> js 로 트랜스파일 하는 과정에 대한 필요 옵션
  • outDir : 트랜스파일된 파일을 저장할 위치
  • target : 트랜스파일 될 js 버젼을 명시
  • lib : 내가 작성한 코드가 어떤 API 를 사용하고, 어떤 환경헤서 실행될 지를 명시. 이를 통해 IDE 의 자동완성 기능을 제공받을 수 있음. (예: "DOM" 을 추가하면 document 에 접근할 수 있고, document 의 프로퍼티 자동완성이 가능함.)
  • module : 트랜스파일된 js 파일들이 어떤 모듈 시스템을 사용할 지를 결정하는 옵션 (NodeJS 는 아직가지 CommonJS 시스템을 이용하고 있는 환경이 많아서 CommonJS 로 셋팅해서 사용을 많이 하는 것 같음.)
  • esModuleInterop: CommonJS 모듈을 쉽게 import 할 수 있도록 돕는 역할을 함. (이 옵션이 false 이면 아래와 같이 모듈을 불러와야 함.)
import * as crypto from 'crypto';
const crypto = require('crypto');

// esModuleInterop: true 이면 아래와 같이 간단하게 import 가능
// 공식문서 설명: Allow 'import x from y' when a module doesn't have a default export.
// crypto module 의 경우 esModuleInterop 옵션을 별도로 주지 않고 아래와 같이 작성하면 Module '"crypto"' has no default export. 오류 발생
import crypto from 'crypto';

2. package.json 파일 수정

package.json 파일 수정

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.8.4"
  }
}

빌드(트랜스파일) 실행

$> npm run build
  • tsconfig.json 파일에 명시한대로 build 폴더 하위에 index.js 파일 생성됨을 확인할 수 있음.
  • tsconfig.json 파일의 compilerOptions.target 속성을 이전 버젼(예: ES3)으로 변경해보면 옛날 스타일의 js 코드를 확인해볼 수 있음.

3. jest

test 환경 구축을 위해 jest 를 설치합니다.

$> npm i jest @types/jest ts-jest -D

jest.config.js 파일을 프로젝트 root 폴더에 생성하고 아래와 같이 설정합니다.

module.exports = {
    "testMatch": [
        "**/__tests__/**/*.+(ts|tsx|js)",
        "**/?(*.)+(spec|test).+(ts|tsx|js)"
    ],
    "transform": {
        "^.+\\.(ts|tsx)$": "ts-jest"
    },
}

이제 src 폴더 하위에 *.spec.ts 파일을 생성하여 테스트 코드를 작성한뒤, 프로젝트 root 폴더 CLI 에서 jest 를 실행하면 테스트 코드가 실행되는 것을 확인할 수 있습니다.

4. 추가 설정 및 기타

추가 설정

$> npm i -D ts-node 
$> npm i nodemon
  • ts-node : 트랜스파일 없이 바로 ts 를 실행시켜줌. 프로젝트가 커질수록 빌드속도가 오래 걸리므로, 한창 개발하고 있을 때는 ts-node 로 실행하는 것이 유리
  • nodemon : 파일이 변경되었을 때 자동으로 재실행해줌.
    개발할 때 아래과 같이 package.json 파일에 스크립트를 추가해서 이용하면 편리함.
  "scripts": {
    "start:dev": "nodemon --exec ts-node src/index.ts",
  },

기타 알아두면 좋은 것

  • Declaration File (*.d.ts 파일) : 기존 JavaScript로 만들어진 서드파티 모듈들을 TypeScript 환경에서도 사용할 수 있도록 따로 타입만 정리해서 넣어둔 파일. 이것을 추가해주면 IDE 에서 코드 자동완성 기능을 이용 가능하다. (그래서 typescript 환경으로 node.js 서버 개발할 때는 @types/node 를 devDependency에 추가하는 듯 하다.)

References

0개의 댓글