我们 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 这个一般是表明 布局的单独使用文件

你可能感兴趣的:(我们 RN 项目中 .tsx,.ts,.style.ts 的区别)