오늘 개발환경 세팅하면서 ts-node 랑 tsx 차이가 궁금해졌다.

기존에 ts-node 로 ts 파일을 실행중이었는데, 어느순간 실행이 안되기 시작했다.

음... 그런데, 리펙토링을 하는 쪽은 tsx를 쓰던 중이라 ts-node 에서 tsx 라 바꾸니 잘 실행되었다.

뭐가 다른걸까 문득 궁금해져서 쳇지피티한테 물어보았다. 필요한 부분만 요약해주는게 확실히 검색보다 나은거 같다.

 

 

ts-node와 tsx는 모두 TypeScript 파일을 런타임에서 실행하는 도구지만, 기능과 목적에서 몇 가지 차이점이 있습니다.

---

1. ts-node

• 목적: TypeScript를 즉시 실행하기 위한 도구.
• 기능:
  • TypeScript 파일을 JavaScript로 컴파일한 후, 즉시 실행합니다.
  • Node.js 런타임에서 실행되는 TypeScript 코드를 지원합니다.
  • 주로 개발 환경에서 사용되며, 프로덕션 환경에서 직접 사용되는 경우는 드뭅니다.
• 특징:
  • TypeScript의 트랜스파일 기능에 의존합니다.
  • 느린 빌드와 실행 속도가 단점으로 지적될 수 있습니다.
• 사용 예시:

  ts-node script.ts
  

  • ts-node는 TypeScript 컴파일러 (tsc)를 내부적으로 사용해서 실행합니다.

---

2. tsx

• 목적: TypeScript와 ESM(ECMAScript Module) 환경을 빠르게 실행하기 위한 도구.
• 기능:
  • 빠른 실행: tsx는 SWC(빠른 TypeScript/JavaScript 트랜스파일러)를 기반으로 하고 있어서 속도가 빠릅니다.
  • ESM, CommonJS, React JSX 등을 모두 지원합니다.
  • 핫 리로딩 (Hot Reloading) 기능을 제공합니다.
• 특징:
  • SWC를 기반으로 하기 때문에 ts-node보다 실행 속도가 빠릅니다.
  • 최신 TypeScript와 ECMAScript 표준을 더 빠르게 지원합니다.
  • 더 나은 성능을 위해 일부 기능이 트랜스파일링 과정에서 제한될 수 있습니다.
• 사용 예시:

  tsx script.ts
  

  • tsx는 내부적으로 SWC 트랜스파일러를 사용하기 때문에 실행 속도가 빠릅니다.

---

비교 요약

항목 ts-node tsx

트랜스파일러	TypeScript 컴파일러 (tsc)	SWC 트랜스파일러
속도	상대적으로 느림	매우 빠름
ESM 지원	제한적	완벽하게 지원
핫 리로딩	제공하지 않음	제공
사용 사례	개발 및 간단한 TypeScript 실행	개발 및 고성능 TypeScript 실행
React 지원	기본 지원 (JSX 포함)	더 빠른 JSX 지원

---

결론

• 개발 속도와 실행 성능이 중요하다면 → tsx
• 전통적인 환경에서 TypeScript를 실행하고 싶다면 → ts-node

최근에는 **tsx**가 더 빠르고 유연하기 때문에 점점 더 많이 사용되고 있습니다.