JS 和 JSX、TS 和 TSX 的区别

gnn

对于JavaScript和与其相关的技术，我们有两种常见的后缀：.js和.jsx，以及.ts和.tsx。

.js，作为JavaScript文件的标志，表明该文件包含的是纯JavaScript代码，这是一种广泛使用的直译式脚本语言，被大多数浏览器直接支持。

而.jsx，则代表该文件不仅包含JavaScript代码，还融入了类似XML的语法，这主要是React框架用来构建组件内部标签的一种方式。这种格式的文件需要通过编译器（如webpack）转换成纯JavaScript代码后，才能被浏览器执行。

值得注意的是，尽管.js和.jsx在语法上有所区别，但在实际使用中，它们的互换性很高，.jsx文件完全可以采用.js的语法编写，而且Facebook的React团队也建议统一使用.js后缀，无需特意区分。

再来看.ts和.tsx，它们与TypeScript紧密相关。.ts文件是纯粹的TypeScript代码，而.tsx文件则是TypeScript与JSX的结合。这意味着.tsx文件在遵循TypeScript语法的同时，还支持React的JSX语法。

从使用的角度来说，如果你的文件中需要包含HTML标签（如

），那么你应该使用.tsx后缀，因为.ts文件不支持这种语法。反之，如果你的文件只是纯粹的辅助函数或类型定义，那么使用.ts后缀就足够了。

总的来说，选择正确的文件后缀对于确保代码的正确性和提高开发效率都是非常重要的。