Typescript 서버를 3단계로 설정하는 방법

간단한 세 단계로 서버를 설정하는 방법을 보여 드리겠습니다.

단계

'typescript-server'라는 폴더를 만듭니다.

'typescript-server' 내부에 src 폴더를 생성하고 index.ts 파일을 생성합니다.

typescript-server 폴더로 cd하고 실행하여 프로젝트를 초기화하십시오.

계속 진행하기 전에 테스트할 다음 코드를 index.ts 파일에 추가하세요.

console.log("Hello, Dev.to");

따라서 코드를 실행할 때마다 콘솔에서 일부 출력을 볼 수 있습니다.

npm init -y

위의 코드는 프로젝트에 대한 모든 종속성을 보유할 package.json 파일을 생성합니다.

필요한 종속성을 설치합니다.

yarn add -D @types/node

yarn add -D typescript

yarn add -D ts-node

yarn add -D nodemon

또는 모두 한 번 설치합니다.

yarn add -D @types/node typescript ts-node nodemon

다음을 실행하여 ts 구성을 만듭니다.

npx tsconfig.json

터미널에서 사용 중인 플랫폼을 선택하고 노드를 선택하라는 몇 가지 옵션이 나타납니다.

package.json 파일을 열고 스크립트 태그 아래에 다음 코드를 추가합니다.

"watch": "tsc -w",

그러면 package.json이 다음과 같이 보일 것입니다.

{
  "name": "lireddit-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

지금까지 수행한 작업이 올바른지 테스트하려면 이제 yarn watch 로 앱을 실행하십시오. 복잡성을 피하기 위해 시스템에 npm 및 yarn이 설치되어 있어야 합니다.

설치된 노드몬을 사용하려면

package.json 파일의 스크립트 섹션에 다른 줄을 추가해야 합니다. 이제 package.json 파일에 다음을 추가하십시오.

"dev": "nodemon dist/index.js",

나는 당신이 우리가 dist/index.js를 어디에서 가지고 있는지 궁금해 할 것이라는 것을 알고 있습니다. 그것에 대해 걱정하지 마십시오. yarn watch를 실행하면 dist/index.js 파일이 컴파일되고 생성됩니다.

프로젝트를 실행하는 다양한 방법을 사용할 수 있도록 모든 실행 스크립트를 추가하겠습니다. 모든 실행 스크립트를 추가한 후의 package.json은 현재 모습입니다.

{
  "name": "lireddit-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js",
    "devIn": "nodemon --exec ts-node src/index.ts",
    "start": "node dist/index.js",
    "startIn": "ts-node src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

이제 다음 명령을 사용하여 앱을 실행할 수 있습니다.

yarn watch

yarn dev

yarn devIn

yarn start

yarn startIn

제 타이프스크립트 설정의 이 작은 부분을 읽어주셔서 감사합니다!