.tsx
Code
TSX（TypeScript XML — React）
TSX 将 TypeScript 的静态类型与 JSX 语法相结合，用于编写 React 组件。它是带类型的 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 元素区分开。
历史
随着 React 和 TypeScript 共同普及，TSX 自然地从 TypeScript 和 JSX 的结合中诞生。到 2020 年，TSX 已成为使用 TypeScript 的新 React 项目的默认选择。