TSX = JSX + TypeScript

TSX = JSX + TypeScript

JSX 파일의 확장자는 보통 .jsx이고 JSX를 포함하는 TypeScript 파일의 확장자는 .tsx입니다.

 

TSX는 TypeScript가 JavaScript에 제공하는 것과 같은 기능을 제공합니다.

 

즉, 컴파일 타임 안전성은 물론 실수를 줄이면서 더 생산적인 코드를 만들 수 있도록 도와줍니다.

 

프로젝트가 TSX를 지원하도록 하려면 tsconfig.json에 아래 내용을 추가하면 됩니다.

JSX 지시어는 세 가지 모드를 지원합니다.

• react
  • JSX 지시문(pragma)에 따라 JSX를 .js 파일로 컴파일합니다. 기본값은 React.createElement입니다.
• react-native
  • 컴파일하지 않고 JSX를 보존하며, .js 확장자 파일을 생성합니다.
• preserve
  • JSX의 타입을 검사하지만 컴파일하지는 않으며 .jsx 확장자의 파일을 생성합니다.

내부적으로 TypeScript는 TSX 타입을 넣고 뺄 수 있는 몇 가지 훅(Hook)을 제공합니다.

 

JSX 타입들은 global.JSX 네임스페이스에 존재하는 특별한 타입으로, TypeScript는 이 네임스페이스를 참고하여 프로그램에 쓰인 TSX 타입들이 올바른지 판단합니다.