TSX (TypeScript XML — React)
Les fichiers TSX (.tsx) combinent la syntaxe JSX de React avec le système de types de TypeScript. C'est le format standard pour les composants React typés, offrant à la fois la sécurité des types et le templating d'interface déclaratif.
Type MIME
text/tsx
Type
Texte
Compression
Sans perte
Avantages
- + Type-safe React components with prop validation at compile time
- + Excellent IDE autocomplete for props and event handlers
- + Catches common React bugs before runtime
Inconvénients
- − Requires TypeScript compiler configuration
- − Generic component syntax can conflict with JSX angle brackets
- − More boilerplate than plain JSX for simple components
Quand utiliser .TSX
Utilisez TSX pour les composants React avec TypeScript — c'est la configuration par défaut dans Next.js, Remix et la plupart des projets React modernes. Préférez .tsx à .jsx pour tout nouveau développement React.
Détails techniques
TSX étend la syntaxe TypeScript avec les expressions JSX qui se vérifient par type par rapport aux définitions JSX.Element. Le compilateur TypeScript valide les types de props, les children et les valeurs de retour. Nécessite les options jsx du tsconfig (preserve, react-jsx, react-jsxdev).
Historique
TSX est apparu naturellement lorsque les développeurs TypeScript ont adopté React. La prise en charge officielle de TypeScript pour JSX (introduite dans TypeScript 1.6 en 2015) a permis la vérification de type des composants React, avec Next.js et les bibliothèques modernes adoptant .tsx par défaut.