VSCode에서 더 빠른 TypeScript 컴파일

VSCode에서 TypeScript가 느립니까?

VSCode 🐌에서 TypeScript가 어떻게 느려질 수 있는지 모두 알고 있습니다. 새로운 코드를 입력하거나 오류를 수정할 때 컴파일러가 따라잡기를 기다리는 자신을 발견한 적이 있습니까?

이것은 빠르게 좌절감을 주고 피드백 루프를 늦춥니다(빠른 피드백 루프는 행복과 동기를 유지하는 데 좋습니다!).

여기서 저는 지난 3년 동안 TypeScript 코드베이스(특히 대규모 코드베이스!)로 작업하면서 시간을 절약한 간단한 팁을 공유하고 있습니다.

TypeScript를 막 시작했을 때 더 일찍 알았더라면 좋았을 텐데…

느린 TypeScript 컴파일을 수정하는 방법

트릭은 다음과 같습니다.

1. Run a separate TypeScript process in watch mode in a terminal tab.
2. Keep it running as you write code — it’ll respond to changes and highlight errors a lot faster compared to VSCode.

내 경험상 그 차이는 현저할 수 있습니다(스크린샷 참조). 사용 중인 프로젝트와 npm 라이브러리에 따라 달라지는 것 같지만 일반적인 패턴은 내가 작업한 여러 프로젝트와 TS 버전에서 꽤 일관됩니다.

이제 저는 이 해킹이 어떻게 그리고 왜 작동하는지 정확히 알지 못합니다. 중요한 것은 그것이 내 직장 생활을 더 좋게 만든다는 것입니다! 😃

그리고 잘만되면 당신도.

TypeScript 프로젝트와 통합

TypeScript 프로젝트에서 이 트릭을 더 편리하게 사용하는 방법은 다음과 같습니다.

다음 2개의 NPM 스크립트를 package.json에 추가합니다.

"scripts": {
  ...
  "typecheck": "tsc",
  "typecheck:watch": "tsc -w"
  ...
}

이제 터미널 탭에서 npm runtypecheck:watch을 실행합니다(VSCode의 터미널 패널에서 실행하여 동일한 창에 항목을 유지하는 것을 좋아합니다).

이렇게 하면 감시 모드에서 별도의 TypeScript 프로세스가 시작됩니다. 시작하는 데 시간이 좀 걸리지만 코드를 변경함에 따라 점진적으로 코드를 다시 컴파일하는 것이 훨씬 빠릅니다.

검사를 한 번만 수행해야 하는 경우 npm run typechek를 사용하십시오. 시계 모드보다 빠르게 실행됩니다.
예를 들어 편리하다고 생각합니다. 빌드가 성공하는지 확인하기 위해 배포하기 전에.

🙌 바로 그거야!

이 팁이 TypeScript 워크플로를 더 빠르게 하고 코딩할 때 더 효율적이고 행복하게 만드는 데 도움이 되기를 바랍니다(확실히 도움이 되었습니다).

자신의 경험을 공유해 주세요. 작업 속도를 높이는 데 도움이 되었나요?