.js .jsx .ts .tsx后缀的区别

• .js是javascript文件的扩展名，例如main.js。
• .jsx是javascript文件并表明使用了JSX语法。
• .ts是typescript文件的扩展名
• .tsx表明是typescript文件并使用了JSX语法。

.js 和 .jsx的区别：两者并没有差别,.jsx文件和.js文件后缀是可以互换的，语法内容完全通用，.jsx文件就是js文件。

那为什么要用.jsx后缀文件名呢？

为了表示使用了JSX语法让编辑器能够正确编译。

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。JSX 只是为 React.createElement(component, props, …children) 方法提供的语法糖。React 自创了JSX语法，是一个 JavaScript 的语法扩展，官方建议在 React 中配合使用 JSX 来替代原始的 JS。因为JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言，但它具有 JavaScript 的全部功能。但是React的JSX语句并非js语言的标准语句（如果使用编辑器默认的js解析方案其实是会报错的，现在编辑器允许你选择不同的解析方案），但是后缀为.jsx，一般编辑器默认就用React的方式解析了。

基本上用哪个后缀名都一样，只要编译器/打包等构建工具/IDE能正确识别处理好，最后生成正常运行工作的js就好。

TypeScript是什么

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。TypeScript 是 JavaScript 的一个超集，扩展了 JavaScript 的语法，是一种给 JavaScript 添加特性的语言扩展，增加了静态类型、类、模块、接口和类型注解方面的功能。支持 ECMAScript 6 标准。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

JavaScript 和 TypeScript 的主要差异：

1. TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序。
2. TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
3. JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
4. TypeScript 通过类型注解提供编译时的静态类型检查。
5. TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
6. TypeScript 为函数提供了缺省参数值。
7. TypeScript 引入了 JavaScript 中没有的“类”概念。
8. TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。