(005)RN开发 js jsx ts tsx的区别
背景:在入门RN开发的过程中,发现公司项目代码中,有的项目是全是.js的后缀文件。有的项目全是ts、tsx、js 文件。心中很是疑惑,所以就写个文章记录下自己的解惑的过程。js:是弱类型语言,容易出现一些编译时不报错,运行时crash的问题。ts: 是编译时语言,一些问题可以更早的别发现。JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚...
背景:在入门RN开发的过程中,发现公司项目代码中,有的项目是全是.js的后缀文件。有的项目全是ts、tsx、js 文件。心中很是疑惑,所以就写个文章记录下自己的解惑的过程。
js:是弱类型语言,容易出现一些编译时不报错,运行时crash的问题。
ts: 是编译时语言,一些问题可以更早的别发现。
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 的全部功能。
.js和.jsx的区别
我现在理解的区别就是
.js可以用来做为模块来使用
.jsx一般作为组件来使用,但是js也可以用来作为组件使用也是没问题的
.js就是前端开发语言,jsx是React框架下用的,要在React框架中的编译器编译成js语言才能使用的
TypeScript
你用 TypeScript 语法写的 .ts .tsx 等后缀的程序是不能直接运行的,而是会被 tsconfig.json 配置中的 “target”: “es6”, 这项配置转换为 es6 语法的 .js 文件。
TypeScript 中的 import 只会加载 .ts .tsx 后缀的文件,而 Javascript 中的 import 只能加载 .js 等后缀的文件
TypeScript的优势
-
规避静态类型出错:TS通过静态类型检查,能把错误从运行时提前至编译时,避免了一些基本bug。
-
应对接口改变 快速准确
假如后端改变了一些接口字段,可以通过直接改变编译出错的地方,快速替换。而不需要一个一个字段地寻找。
公司现在的前端项目大概有十几万行代码,各种从后端拿到的数据类型有上百种以前后端接口一改,要改字段,瞬间懵逼。全局搜索,一个个改,各种牵扯到的东西改下来再测试一顿估计小半天没了。用了 TypeScript 之后,把数据对应的 interface 改掉,然后重新编译一次,把编译失败的地方全部改掉就好了。而且在优秀的 TypeScript 架构中,业务开发基本不需要写类型,所有外部输入的类型都可以自动拿到,只需要把一些 local variable 和 output 的类型定义一下就好了,基本跟手写 ES 6 没有区别。写代码的过程中各种错误在越早期修改的成本就越低。试想没有静态检查跑一遍代码进某个奇怪的 case 才能复现的错误在写代码时期就直接给你的个错误提示,将是多么省时省力省钱。
ts js 区别
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言。
JavaScript 是轻量级的解释性脚本语言,可嵌入到 HTML 页面中,在浏览器端执行。而TypeScript 是JavaScript 的超集,即包含JavaScript 的所有元素,能运行JavaScript 的代码,并扩展了JavaScript 的语法。相比于JavaScript ,它还增加了静态类型、类、模块、接口和类型注解方面的功能,更易于大项目的开发。
经过查阅资料,TypeScript 相比于JavaScript 的优势总结为以下几点:
1.便于开发人员做注释。
2.能帮助开发人员检测出错误并修改。
3.TypeScript工具使重构更变的容易、快捷。
4.TypeScript 引入了 JavaScript 中没有的“类”概念。
5.TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中。
6.。类型安全功能能在编码期间检测错误,这为开发人员创建了一个更高效的编码和调试过
后续慢慢理解再补充。。。
现在RN工程中都改成ts、tsx了。
注意L:建议ts项目采用团队统一的tslint
参考链接必读
更多推荐
所有评论(0)