NestJS같은 Typescript를 사용하는 프레임워크의 경우 프로젝트 셋업시에 모두 자동으로 처리되므로 별도로 타입스크립트 프로젝트 관련 설정을 해줄일이 딱히 없다.

하지만 기본 구성을 아는것은 중요하기때문에 프레임워크의 도움없이 tsconfig.json파일을 수정하고 직접 컴파일러를 통해 타입스크립트에서 자바스크립트로 컴파일되는 과정 등 타입스크립트를 사용하기위해 간단한 프로젝트 셋업 방법에 대해서 알아보자.

패키지 설치

우선 typescript 코드를 javascript 코드로 변환 해주기위해 typescript 컴파일러를 npm을 이용하여 설치한다. (개발 환경 전역적으로 사용하기 위해 global 옵션을 추가하였다)

$ npm install -g typescript # typescript 컴파일러

명령어 사용은 tsc이고 기본적으로 tsconfig.json 파일을 찾고 해당 설정에 맞춰서 컴파일을 실행한다.

아래 명령어는 src 디렉터리내의 모든 .ts파일을 컴파일하는 명령이다.

$ tsc src/*.ts

또한 아래 명령어로 tsconfig.json 파일을 초기화할 수 있다.

  • tsconfig.json 파일 예시
    {
    "compilerOptions": {
        "module": "commonjs", // 변환되는 자바스크립트 코드의 모듈 시스템을 설정
        "esModuleInterop": true,
        "target": "ES5", // 컴파일해서 만들어지는 자바스크립트 코드의 버전을 지정
        "moduleResolution": "node",
        "outDir": "dist",
        "baseUrl": ".",
        "sourceMap": true,
        "downlevelIteration": true,
        "noImplicitAny": false,
        "paths": { "*": ["node_modules/"] }
    },
    "include": ["src/**/*"]
}

ts-node

ts-node는 타입스크립트 파일을 컴파일후 바로 실행시켜주는 도구이다.

참고로, node.js 버전 20 이상부터는 변경되는것이 많아 ts-node를 사용하는데 어려움이 있기때문에 tsx를 사용하는것을 권장한다

$ npm install -g ts-node # typescript 컴파일러 명령을 대신하고 바로 실행 (즉시 실행)

@types/node

이 패키지는 타입스크립트 환경에서 node의 type(자료형)을 정의하여 타입 추론을 사용하도록 해준다.

$ npm install @types/node # nodeJS typescipt 지원

해당 패키지 말고도 DefinitelyTyped 저장소에서 여러 자바스크립트 패키지를 타입스크립트 환경에서 타입으로 사용할 수 있도록 제공한다

위의 패키지들을 모두 설치했다면 타입스크립트를 사용할 준비는 모두 끝났다. 아래는 간단한 예시이다

프로젝트 예시

express를 사용한 간단한 웹서버를 띄우는것으로 예시를 들어보자. 우선 express를 사용하기위해 패키지를 설치한다.

$ npm install express @types/express
  • 폴더 구조
(project_root)
├── node_modules
├── package.json
├── package-lock.json
├── src
│   └── index.ts
└── tsconfig.json
  • index.ts
import express from "express";

const app : express.Express = express();

app.get('/', (req : express.Request, res : express.Response) => {
  res.send('Hello Typescript!');
  res.statusCode = 200;
})

app.listen(3000, ()=> {
  console.log("Server is listening on port 3000");
});

typeescript 컴파일러 tsc로 프로젝트 루트 디렉터리에서 컴파일을 한다.

$ tsc

위에서 예시로 들었던 tsconfig.json를 기준으로 컴파일을 실행하기 때문에

  • 소스 디렉터리는 src 디렉터리내의 파일을 사용하고
  • 컴파일의 결과는 dist디렉터리에 생성될 것이다

컴파일이 성공적으로 완료되고, dist 디렉터리가 생성된것을 확인하였으면, node 명령어를 이용해 컴파일된 자바스크립트 파일을 실행한다.

$ node dist/index.js
Server is listening on port 3000

물론 ts-node로 별도의 컴파일과정 없이 바로 실행할수 있다.

$ ts-node src/index.ts
Server is listening on port 3000