(005)RN开发 js jsx ts tsx的区别-程序员宅基地

技术标签: ReactNative  js jsx ts tsx  RN ts tsx  typescript  ts tsx  

背景:在入门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

参考链接必读

为什么推荐JSX来替换JS
TypeScript入门篇——基础知识(快速了解js与ts差异)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shifang07/article/details/105371268

智能推荐

《第一行代码》(第二版)广播的问题及其解决_代码里的广播错误-程序员宅基地

文章浏览阅读2.6k次,点赞5次,收藏13次。1)5.2.1弹出两次已连接或者未连接这是因为你同时打开了流量和WiFi,他就会发出两次广播。2)5.3.1中发送自定义广播问题标准广播未能弹出消息:Intent intent=new Intent("com.example.broadcasttest.MY_BROADCAST");sendBroadcast(intent);上述已经失效了。修改:Intent intent=new Intent("com.example.broadcasttest...._代码里的广播错误

K8s 学习者绝对不能错过的最全知识图谱(内含 58个知识点链接)-程序员宅基地

文章浏览阅读249次。作者 |平名 阿里服务端开发技术专家导读:Kubernetes 作为云原生时代的“操作系统”,熟悉和使用它是每名用户的必备技能。本篇文章概述了容器服务 Kubernet..._k8知识库

TencentOS3.1安装PHP+Nginx+redis测试系统_tencentos-3.1-程序员宅基地

文章浏览阅读923次。分别是etc/pear.conf,etc/php-fpm.conf, etc/php-fpm.d/www.conf,lib/php.ini。php8安装基本一致,因为一个服务期内有2个版本,所以注意修改不同的安装目录和端口号。可以直接使用sbin下的nginx命令启动服务。完成编译安装需要gcc支持,如果没有,使用如下命令安装。安装过程基本一致,下面是安装7.1.33的步骤。执行如下命令,检查已经安装的包和可安装的包。执行如下命令,检查已经安装的包和可安装的包。执行如下命令,检查已经安装的包和可安装的包。_tencentos-3.1

urllib.request.urlopen()基本使用_urllib.request.urlopen(url)-程序员宅基地

文章浏览阅读3.1w次,点赞21次,收藏75次。import urllib.requesturl = 'https://www.python.org'# 方式一response = urllib.request.urlopen(url)print(type(response)) # <class 'http.client.HTTPResponse'># 方式二request = urllib.request.Req..._urllib.request.urlopen(url)

如何用ChatGPT+GEE+ENVI+Python进行高光谱,多光谱成像遥感数据处理?-程序员宅基地

文章浏览阅读1.5k次,点赞12次,收藏15次。如何用ChatGPT+GEE+ENVI+Python进行高光谱,多光谱成像遥感数据处理?

RS485总线常识_rs485 差分走綫間距-程序员宅基地

文章浏览阅读1.2k次。RS485总线常识 2010-10-12 15:56:36| 分类: 知识储备 | 标签:rs485 总线 传输 差分 |字号大中小 订阅RS485总线RS485采用平衡发送和差分接收方式实现通信:发送端将串行口的TTL电平信号转换成差分信号A,B两路输出,经过线缆传输之后在接收端将差分信号还原成TTL电平信号。由于传输线通常使用双绞线,又是差分传输,所_rs485 差分走綫間距

随便推点

移植、制作uboot、Linux(一)_uboot制作-程序员宅基地

文章浏览阅读621次。u-boot、linux烧录_uboot制作

windows下安装git和gitbash安装教程_64-bit git for windows setup.-程序员宅基地

文章浏览阅读1.2w次,点赞10次,收藏44次。windos上git安装,git bash安装_64-bit git for windows setup.

环形链表(算法java)_java 实现环形链表-程序员宅基地

文章浏览阅读196次。环形链表(算法java)的两种解决方法_java 实现环形链表

docker部署Airflow(修改URL-path、更换postgres -->myslq数据库、LDAP登录)_airflow docker-程序员宅基地

文章浏览阅读5.7k次。Airflow什么是 Airflow?Airflow 的架构Airflow 解决哪些问题一、docker-compose 安装airflow(postgres)1、创建启动文件airflow-docker-compose.yml.1.1、添加挂载卷,需要修改airflow-docker-compose.yml的位置2、创建本地配置文件airflow.cfg2.1、如果想修改WEB URL地址,需要修改airflow.cfg中以下两个地方3、之后up -d直接启动即可web访问地址:二、存储数据库更换post_airflow docker

计算机毕业设计springboot高校教务管理系统532k79【附源码+数据库+部署+LW】-程序员宅基地

文章浏览阅读28次。选题背景:随着社会的发展和教育的普及,高校教务管理系统在现代高等教育中扮演着至关重要的角色。传统的手工管理方式已经无法满足高校日益增长的规模和复杂的管理需求。因此,开发一套高效、智能的教务管理系统成为了当今高校管理的迫切需求。选题意义:高校教务管理系统的开发具有重要的意义和价值。首先,它可以提高高校教务管理的效率和准确性。通过自动化处理学生选课、排课、考试安排等繁琐的事务,大大减轻了教务人员的工作负担,提高了工作效率。同时,系统可以实时更新学生信息和课程信息,减少了数据错误和冗余,保证了管理的准确性

javaint接收float_Java Integer转换double,float,int,long,string-程序员宅基地

文章浏览阅读132次。首页>基础教程>常用类>常用 Integer类Java Integer转换double,float,int,long,stringjava中Integer类可以很方便的转换成double,float,int,long,string等类型,都有固定的方法进行转换。方法double doubleValue() //以 double 类型返回该 Integer 的值。flo..._java integet接收float类型的参数

推荐文章

热门文章

相关标签