React中使用TypeScript代替prop-types

原文链接

公众号-React中使用TypeScript代替prop-types

个人公众号,呜呜呜,求各位大佬们关注下,本人的公众号主要写React 跟NodeJs的

​关于prop-types

对于部分的同学,不大了解为什么我们的代码里面要用到prop-types这个库,对此需要先解释下这个库的历史。

很久很久以前,React在出来的时候,在对组件处理的时候,对props进行了校验,比如一个计算数字的子组件,对props的要求是必须都为数字,而如果传入的不是数字,就很容易报错,因此我们需要在组件内对props进行校验。

基于上述环境,React对props进行了类型约束,就如同现在的TS一样,对每一个参数都规定了类型,但是到后来的时候,就觉得这个比较鸡肋,也为了让React这个库没那么大,所以就将其划分出来,作为一个专属库,名为prop-types

所以,在prop-types的库中,有了下面这么一个描述

PropTypes 最初是作为 React 核心模块的一部分公开的,并且是 通常与 React 组件一起使用。 用法

既然现在prop-types已经是一个单独的库了,那么我们就要将其安装到我们的项目中,不过由于prop-types只在开发环境中奏效,所以只需要install -D即可。

"prop-types": "^15.8.1",

ok,在安装过了prop-types之后,再将用法写在下面

import PropTypes from "prop-types";import { PureComponent } from "react";
class CPropsComponent extends PureComponent {static PropTypes = {propStr: PropTypes.string,propNum: PropTypes.number,};render() {const { propStr, propNum } = this.props;return (<><span>str:{propStr}</span><br /><span>number:{propNum}</span><br /></>);}
}
export default CPropsComponent;


这样子,当我们传入两个参数的时候,就可以做出类型校验了。
但是呢,大人!!!!现在已经是2023年了,typescript已经不是加分项,而是必须项了!!!

Typescript的代替

前面提及到了,prop-types的作用是为了校验我们的props的类型!!这样子,我们就不得不提起一个牛逼的兄弟–Typescript。

我想大家都应该明白为啥一向严谨的我,在写prop-types的时候连一个效果展示图都不补贴出来了吧。。因为实在没必要。

接下来贴上一段用Typescript代替的代码

interface PropComponentProps {propStr: string;propNum: number;
}
​
​
function PropsComponent(props: PropComponentProps) {const { propStr = "", propNum = 0 } = props;return (<><span>str:{propStr}</span><br /><span>number:{propNum}</span><br /><span>numObj</span></>);
}
export default PropsComponent;


简单明了。。

最后再贴上一份关于类组件的代码,也只是设置了component的props类型而已,请看第二行开始

import { PureComponent } from "react";
class CPropsComponent extends PureComponent<{propNum: number;propStr: string;
}> {render() {const { propStr, propNum } = this.props;return (<><span>str:{propStr}</span><br /><span>number:{propNum}</span><br /></>);}
}
export default CPropsComponent;

最后的叮嘱

其实,从prop-types的库只有js,就可以知道已经属于开始废弃了。

大人,时代变了,已经是属于TS的时代了。不信?React的文档是这么写的

我们建议使用 TypeScript 而不是在运行时检查 prop 类型。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/208139.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArkTS快速入门

一、概述 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript&#xff08;简称TS&#xff09;基本语法风格的基础上&#xff0c;对TS的动态类型特性施加更严格的约束&#xff0c;引入静态类型。同时&#xff0c;提供了声明式UI、状态管理等相应的能力&#xff0c;让开发者可以…

深度学习基础回顾

深度学习基础 浅层网络 VS 深层网络深度学习常用的激活函数Sigmoid 函数ReLU 函数Softplus 函数tanh函数 归纳偏置CNN适用数据归纳偏置 RNN适用数据归纳偏置 浅层网络 VS 深层网络 浅层神经网络参数过多&#xff0c;导致模型的复杂度和计算量很高&#xff0c;难以训练。而深层…

Redisson的基础使用(2)

布隆过滤器&#xff08;Bloom Filter&#xff09; 布隆过滤器一般用于解决缓存穿透的问题。主要原理是使用一组哈希函数&#xff0c;将元素映射成一组位数组中的索引位置。如果要检查某个元素是否在集合中时&#xff0c;将此元素通过所有的哈希函数&#xff0c;查看哈希值对应的…

硬件开发笔记(十五):RK3568底板电路VGA显示接口原理图分析

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/134849296 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

多态和继承复习

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 多态多态成立的条件细节 继承&#x1f48e;总结 多态 多态成立的条件 存在继承关系或者实现关系子类重写父类的方法父类引用指向子类对象 细节 通过父类的引用调用子类的对象 Animal animal new Dog();animal…

C语言搭建项目-学生管理系统(非链表)

、 目录 搭建offer.h文件 搭建offer.c中的main函数 密码登入系统 搭建my_oferr.c中的接口函数 使用帮助菜单接口函数 增加学生信息接口函数 查询学生信息接口函数 删除学生信息接口函数 保存学生信息接口 打开文件fopen 关闭文件fclose 判断是否保存文件fwrite 退出执行文件…

C++:const类型数据的修改问题

在C语言中const类型的数据严格意义上可以修改&#xff1a; const int a1; int*b&a; *b2;不同于C语言&#xff0c;C中指针类型是要严格对应的&#xff0c;对const类型的数据必须使用const类型的指针进行接收&#xff0c;从而避免修改&#xff1b; 但问题是c中同样支持指针的…

年度工作总结怎么写?掌握这些年终总结万能公式,让你的报告出彩无比!

光阴似箭&#xff0c;日月如梭&#xff0c;时间总是不疾不徐地向前奔去&#xff0c;转眼就来到了2023年的最后一个月&#xff0c;12月一到&#xff0c;上班族和打工人又要开始忙活工作总结的事情~ 工作总结&#xff0c;不仅是一年工作的回顾&#xff0c;更是未来规划的起点。你…

Springboot中的RestTemplate

Springboot中的RestTemplate 在Spring Boot应用程序中&#xff0c;RestTemplate是一个用于进行HTTP请求的强大工具。通常用于与RESTful API进行交互、调用其他服务或执行HTTP请求。它提供了各种方法来发送HTTP请求&#xff08;如GET、POST、PUT、DELETE等&#xff09;&#xf…

cuda lib 线程安全的要义

1, 概述 cuda lib 线程安全的几个多线程的情景&#xff1a; 单卡多线程&#xff1b; 多卡多线程-每卡单线程&#xff1b; 多卡多线程-每卡多线程&#xff1b; 需要考虑的问题&#xff1a; 每个 cublasHandle_t 只能有一个stream么&#xff1f; 每个cusolverHandle_t 只能有一…

python3.5安装教程及环境配置,python3.7.2安装与配置

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python3.5安装教程及环境配置&#xff0c;python3.7.2安装与配置&#xff0c;现在让我们一起来看看吧&#xff01; python 从爬虫开始&#xff08;一&#xff09; Python 简介 首先简介一下Python和爬虫的关系与概念&am…

Android Studio的代码笔记--IntentService学习

IntentService学习 IntentService常规用法清单注册服务服务内容开启服务 IntentService 一个 HandlerThread工作线程&#xff0c;通过Handler实现把消息加入消息队列中等待执行&#xff0c;通过传递的intent在onHandleIntent中处理任务。&#xff08;多次调用会按顺序执行事件…

Spring Cloud Alibaba实践 --Sentinel

sentinel简介 Sentinel的官方标题是&#xff1a;分布式系统的流量防卫兵。从名字上来看&#xff0c;很容易就能猜到它是用来作服务稳定性保障的。对于服务稳定性保障组件&#xff0c;如果熟悉Spring Cloud的用户&#xff0c;第一反应应该就是Hystrix。但是比较可惜的是Netflix…

三防平板|手持终端PDA|8寸/10寸工业三防平板电脑主板方案定制

近年来&#xff0c;随着科技的快速发展&#xff0c;三防平板成为了各行各业中不可或缺的工具。三防平板采用IP67级别的防护设计&#xff0c;通过了多项测试标准&#xff0c;如国标和美标&#xff0c;具备防水、防摔、防尘、防撞、防震、防跌落以及防盐雾等多重防护功能。因此&a…

JavaScript 简单理解原型和创建实例时 new 操作符的执行操作

function Person(){// 构造函数// 当函数创建&#xff0c;prototype 属性指向一个原型对象时&#xff0c;在默认情况下&#xff0c;// 这个原型对象将会获得一个 constructor 属性&#xff0c;这个属性是一个指针&#xff0c;指向 prototype 所在的函数对象。 } // 为原型对象添…

HarmonyOS应用开发工具DevEco Studio安装与使用

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 知识库内容逐步完善中… 工欲善其事必先利其器&#xff0c;要编写HarmonyOS应用就需要用到官方提供的IDE工具来编写相应的代码。 在鸿蒙开发者官网&#xff0c;其提供了官方的开…

基于Java医院挂号管理系统

基于Java医院挂号管理系统 功能需求 1、患者信息管理&#xff1a;系统需要提供患者的基本信息录入功能&#xff0c;包括姓名、性别、年龄、联系方式等。此外&#xff0c;系统还应支持对患者信息进行修改、查询和删除的操作。 2、挂号管理&#xff1a;系统需要提供挂号功能&a…

高效的多维空间点索引算法——GeoHash

一、Geohash 算法简介 GeoHash是空间索引的一种方式&#xff0c;其基本原理是将地球理解为一个二维平面&#xff0c;通过把二维的空间经纬度数据编码为一个字符串&#xff0c;可以把平面递归分解成更小的子块&#xff0c;每个子块在一定经纬度范围内拥有相同的编码。以GeoHash方…

springboot 极简案例

安装idea File -> New Project 选择依赖 创建controller文件 输入controller类名 输入代码 运行项目 访问 localhost:8080/hello/boot package com.example.demo;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.…

数据库对象介绍与实践:视图、函数、存储过程、触发器和物化视图

文章目录 一、视图&#xff08;View&#xff09;1、概念2、基本操作1&#xff09;创建视图2&#xff09;修改视图3&#xff09;删除视图4&#xff09;使用视图 3、使用场景4、实践 二、函数&#xff08;Function&#xff09;1、概念2、基本操作1&#xff09;创建函数2&#xff…