TypeScript를 사용하도록 새로운 노드 프로젝트를 전환하는 단계별 단계

좋아, 당신은 타이프스크립트와 사랑에 빠졌고 이제 당신의 새로운 익스프레스 프로젝트에서 정말로 그것을 사용하고 싶어한다.

노드 프로젝트에서 typescript를 사용하는 일반적인 접근 방식

터미널을 통해 디렉터리에서 이 명령을 실행하여 새 노드 프로젝트를 시작합니다.

1. package.json 파일을 사용하여 새 노드 프로젝트를 생성합니다.

npm init

이렇게 하면 새 package.json 파일이 생성됩니다. 내 것을 보여드리겠습니다:

{
  "name": "friend-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Teerasej Jiraphatchandej",
  "license": "ISC"
}

2. TypeScript용 패키지 추가

그래서 우리는 개발에 typescript를 사용할 수 있도록 이 프로젝트를 설정하려고 합니다. 2개의 패키지를 devDependencies로 추가합니다.

npm i -D @types/node
npm i -D typescript

시작합니다. 아래와 비슷한 package.json 파일이 있습니다.

{
  "name": "friend-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Teerasej Jiraphatchandej",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.29",
    "typescript": "^4.6.3"
  },
}

3. tsconfig.json 추가

좋습니다. 프로젝트 디렉터리의 루트에 tsconfig.json이라는 다른 파일을 생성해 보겠습니다. 이 파일은 typescript의 컴파일러가 어떻게 작동하는지 알려줍니다.

{
    "compilerOptions": {
      "module": "commonjs",
      "esModuleInterop": true,
      "target": "es6",
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "dist"
    },
    "lib": ["es2015"]
}

5. 컴파일하고 실행하자

이 시점에서 터미널에서 다음 명령을 사용하여 프로젝트의 모든 tsc 파일을 /dist 디렉토리로 컴파일할 수 있습니다(tsconfig.json에서 설정한 대로: outDir).

tsc

다음을 사용하여 컴파일된 코드를 실행할 수 있습니다.

node dist/<file name>.js

6. 완료되었지만 더 쉽게 추가할 수 있습니다.

2개의 명령을 반복적으로 실행하면 에너지가 소모됩니다. package.json의 스크립트 섹션을 사용하여 바로 가기를 만들 수 있습니다.

{
  ...
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

package.json 파일을 저장한 후 간단한 명령 하나로 프로젝트를 컴파일하고 실행할 수 있습니다.

npm run start