TypeScript + Node.js 프로젝트 설정 방법

Nov 26 2022
이 짧은 가이드는 새로운(또는 기존!) Node.js 프로젝트로 TypeScript를 설정하는 과정을 안내합니다.

이 짧은 가이드는 새로운(또는 기존!) Node.js 프로젝트로 TypeScript를 설정하는 과정을 안내합니다.

전제 조건:

  • Node와 JavaScript에 어느 정도 익숙해야 합니다.
  • 코드 편집기가 설치되어 있어야 합니다(VSCode 권장).
  • 이 가이드는 Linux, MacOS 또는 다른 UNIX와 유사한 운영 체제를 사용하고 있다고 가정합니다.
  • 이 가이드는 또한 패키지 관리자로 npm을 사용한다고 가정합니다(대신에 원사, pnpm 또는 선호하는 패키지 관리자를 자유롭게 사용).
  • 이것은 TypeScript를 매우 빠르게 시작하는 방법을 보여줍니다.
  • 이 가이드는 또한 애플리케이션의 핫 리로딩을 지원하기 위해 nodemon과 같은 널리 사용되는 패키지를 사용하는 방법을 보여줍니다.
  • TypeScript는 선택적 정적 타이핑을 제공하는 JavaScript의 상위 집합입니다. 그것은 마이크로소프트에 의해 구축되었고 그들이 VS Code 이후로 발표한 유일한 좋은 것입니다(농담 )
  • 문서 역할을 하고 온보딩 오버헤드를 줄여 개발자 경험을 향상시킵니다.
  • 버그/문제를 빠르게 식별하여 전반적인 소프트웨어 품질을 높일 수 있습니다.
  • 자세한 내용 은 TypeScript 핸드북 을 읽어 보세요.
  1. 디렉토리를 만들고 새로 만든 폴더로 이동하십시오.
  2. mkdir typescript-example
    cd typescript-example
    

    npm init -y
    

npm install typescript --save-dev

npm install @types/node --save-dev

5. tsconfig.json 생성

npx tsc --init

6. 노드 패키지 실행기(npx) 를 사용하여 tsc 명령을 사용하여 코드를 컴파일합니다 .

npx tsc

로컬 개발자 경험 개선

  1. 핫 리로딩 — 실시간 변경 사항에 대해 애플리케이션을 핫 리로드할 수 있으므로 dev ex가 크게 향상됩니다. Node.js 앱에서 Nodemon을 통해 이를 설정할 수 있습니다.
  2. npm install --save-dev ts-node nodemon
    

위의 내용은 TypeScript + Node 프로젝트를 로컬에서 빠르게 설정하기에 충분해야 합니다. 다음을 통해 이를 더욱 향상시킬 수 있습니다.

  • 린터 사용: ESLint 와 같은 것을 사용하십시오 . 이것은 코드 전체에 표준을 설정할 수 있는 정적 코드 분석 도구입니다. 이를 사용하여 코드베이스에 대한 코딩 표준 및 패턴을 적용할 수 있습니다.
  • 심층 삭제 도구 도입: Rimraf 는 프로덕션으로 진행하기 전에 원치 않는 파일을 제거합니다 .
  • 정적 모듈 번들러 추가: webpack(또는 turbopack)을 사용합니다. 이는 소규모 프로젝트에는 과잉일 수 있지만 애플리케이션이 확장됨에 따라 모든 JS/TS를 관리하는 메커니즘이 필요합니다 .
  • 자동화 — 귀하의 비즈니스를 위해 위의 사항을 어떻게 자동화할 수 있습니까?