在 React 的 TypeScript 中，.ts 和 .tsx 扩展名有什么区别？

大家好！我最近开始学习将 TypeScript 与 React 结合使用，遇到了一个让我困惑的情况。当我创建组件时，我看到项目中使用了两种不同的扩展名：`.ts` 和 `.tsx`。例如，我有一个 `Button.ts` 文件和一个 `App.tsx` 文件。两者都包含 TypeScript 代码，但当我尝试在 `.ts` 文件中编写 JSX 时，代码编辑器会报错，而将文件重命名为 `.tsx` 后一切正常。 以下是我的代码示例，它在 `Button.ts` 中无法工作： ```typescript import React from 'react'; interface ButtonProps { label: string; onClick: () => void; } // 错误：JSX 在 .ts 文件中不受支持 const Button: React.FC = ({ label, onClick }) => { return {label}; }; ``` 而同样的代码，如果保存为 `Button.tsx` 文件，则完美运行。 我还注意到，我的一些同事对简单的工具和类型使用 `.ts`，而只对带有标记的组件使用 `.tsx`。但这是否有严格的规则？