.tsx
Code
TSX（TypeScript XML — React）
TSXはTypeScriptの静的型付けとReactコンポーネント用のJSX構文を組み合わせたものです。型付きReactコンポーネントの標準的なファイル拡張子で、props、state、イベントハンドラのコンパイル時型チェックを提供します。
MIMEタイプ
text/tsx
種類
テキスト
圧縮
無劣化
メリット
- + Type-safe React components with prop validation at compile time
- + Excellent IDE autocomplete for props and event handlers
- + Catches common React bugs before runtime
デメリット
- − Requires TypeScript compiler configuration
- − Generic component syntax can conflict with JSX angle brackets
- − More boilerplate than plain JSX for simple components
.TSXを使うタイミング
TypeScriptプロジェクトのすべてのReactコンポーネントにTSXを使用してください。props、state、context、hooksの型安全性が提供されます。
技術的詳細
TSXファイルはTypeScriptコンパイラによって処理され、コードの型チェックとJSXのJavaScriptへの変換が行われます。ジェネリックコンポーネントは山括弧を使用し、コンパイラがJSX要素と区別します。
歴史
TSXはReactとTypeScriptが共に人気を得る中で、TypeScriptとJSXの組み合わせから自然に生まれました。2020年までに、TSXはTypeScriptを使用する新しいReactプロジェクトのデフォルトとなりました。