我们 RN 项目中 .tsx，.ts，.style.ts 的区别

发现我们 RN 项目中，有.tsx，.ts，.style.ts 不同的文件，主要是有点混用啦

一、什么是 TypeScript

Typed JavaScript at Any Scale.
添加了类型系统的 JavaScript，适用于任何规模的项目。

• 类型系统
  这样的类型系统体现了 TypeScript 的核心设计理念^[6]：在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。

• 适用于任何规模

  • TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率
  • TypeScript 还可以和 JavaScript 共存

引用：什么是 TypeScript

二、.tsx，.ts，.style.ts 的区别

• .js 是javascript文件的扩展名，例如 main.js。
• .jsx 是javascript文件并表明使用了JSX语法。
• .ts 是 typescript 文件的扩展名
• .tsx 表明是 typescript 文件并使用了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就好。

引用：.tsx是什么

So，我们默认:

• ts 最简单的typescript 文件，类似接口模型类
• tsx 使用了JSX语法的typescript 文件，类似视图显示类
• .style.ts 这个一般是表明 布局的单独使用文件