.ts와 .tsx 파일은 TypeScript 프로그래밍 언어에서 사용되는 두 가지 다른 파일 확장자입니다. 이들의 주요 차이점은 JSX(JavaScript XML) 문법의 지원 여부에 있습니다:
-
.ts (TypeScript 파일):
.ts 파일은 순수 TypeScript 코드를 포함합니다.- 이 파일 형식은 JSX 문법을 지원하지 않습니다. 즉, React 컴포넌트와 같은 JSX 문법을 사용하는 코드를 포함할 수 없습니다.
- 일반적으로 TypeScript를 사용하는 일반적인 스크립트나 라이브러리 코드 작성에 사용됩니다.
-
.tsx (TypeScript + JSX 파일):
.tsx 파일은 TypeScript 코드와 함께 JSX 문법을 지원합니다.- 이 파일 형식은 주로 React 컴포넌트를 포함하는 파일에서 사용됩니다. React 컴포넌트는 JSX를 사용하여 UI를 선언적으로 기술하는데,
.tsx 확장자는 이러한 JSX 문법을 올바르게 처리하고 분석하는 데 필요합니다.
- TypeScript의 타입 체킹 기능을 통해 JSX 코드의 타입 안정성을 보장합니다.
간단히 말해, .ts 확장자는 JSX를 포함하지 않는 일반 TypeScript 코드에 사용되며, .tsx 확장자는 JSX를 포함하는 TypeScript 코드, 특히 React 컴포넌트에 사용됩니다. TypeScript 컴파일러는 이 두 파일 형식을 다르게 처리하여, JSX 문법이 포함된 코드를 올바르게 해석하고 컴파일할 수 있도록 합니다.