react+ts

1.概念

React和TypeScript集合使用的重点集中在 存储数据/状态有关的Hook函数以及组件接口的位置,这些地方最需要数据类型校验
在这里插入图片描述

2.使用Vite创建项目

Vite是前端工具链工具,可以帮助我们快速创建一个 react+ts 的工程化环境出来
Vite官网:https://cn.vitejs.dev/

npm create vite@latest react-typescript -- --template react-ts项目名称                        模版模式

安装依赖运行项目

# 安装依赖
npm i # 运行项目
npm run dev

3.useState——自动推导

简单场景

简单场景下,可以使用TS的自动推断机制,不用特殊编写类型注解,运行良好

const [val, toggle] = React.useState(false)
// `val` 会被自动推断为布尔类型
// `toggle` 方法调用时只能传入布尔类型
// react + ts
// 根据初始值自动推断
// 场景:明确的初始值
import { useState } from 'react'
function App() {const [value, toggle] = useState(false)const [list, setList] = useState([1, 2, 3])const changeValue = () => {toggle(true)}const changeList = () => {setList([4])}return <>this is app {list}</>
}export default App

4.useState——传递泛型参数

useState本身是一个泛型函数,可以传入具体的自定义类型

// react + ts
type User = {name: stringage: number
}
const [user, setUser] = useState<User>({name: 'jack',age: 18,})

说明:
1.限制useState函数参数的初始值必须满足类型为:user | ()=>user
2.限制setUser函数的参数必须满足类型为: User | ()=> User | underfined
3.user状态数据具备User类型相关的类型提示

// react + tsimport { useState } from 'react'type User = {name: stringage: number
}function App() {// 1. 限制初始值的类型// const [user, setUser] = useState<User>({//   name: 'jack',//   age: 18,// })// const [user, setUser] = useState<User>(() => {//   return {//     name: 'jack',//     age: 18,//   }// })const [user, setUser] = useState<User>({name: 'jack',age: 18,})const changeUser = () => {setUser(() => ({name: 'john',age: 28,}))}return <>this is app {user.name}</>
}export default App

5.useState——初始值为null

实际开发时,有些时候useState的初始值可能为null或者undefined,按照泛型的写法是不能通过类型校验的,此时可以通过完整的类型联合null或者undefined类型即可

type User = {name: Stringage: Number
}
const [user, setUser] = React.useState<User>(null)
// 上面会类型错误,因为null并不能分配给User类型const [user, setUser] = React.useState<User | null>(null)
// 上面既可以在初始值设置为null,同时满足setter函数setUser的参数可以是具体的User类型

说明:
1.限制useState函数参数的初始值可以是User | null
2.限制setUser函数的参数类型可以是User | null

// react + ts
import { useState } from 'react'
type User = {name: stringage: number
}
function App() {const [user, setUser] = useState<User | null>(null)const changeUser = () => {setUser(null)setUser({name: 'jack',age: 18,})}// 为了类型安全  可选链做类型守卫// 只有user不为null(不为空值)的时候才进行点运算return <>this is app {user?.age}</>
}
export default App

5.props与ts——基础使用

为组件prop添加类型,本质是给函数的参数做类型注解,可以使用type对象类型或者interface接口来做注解
在这里插入图片描述
说明:button组件只能传入名称为className的prop参数,类型为string,且为必填

// props + ts
//写法一
// type Props = {
//   className: string
// }//写法二
interface Props {className: stringtitle?: string
}function Button(props: Props) {const { className } = propsreturn <button className={className}>click me </button>
}function App() {return (<><Button className="test" title="this is title" /></>)
}export default App

6.props与ts——为children添加类型

children是一个比较特殊的prop,支持多种不同类型数据的传入,需要通过一个内置的ReactNode类型来做注解
在这里插入图片描述
说明:注解之后,children可以是多种类型,包括:react.reactElement、string、number、react.reactFragment、react.reactPortal、boolean、null、undefined

// props + tstype Props = {className: stringchildren: React.ReactNode
}function Button(props: Props) {const { className, children } = propsreturn <button className={className}>{children} </button>
}function App() {return (<><Button className="test">click me!</Button><Button className="test"><span>this is span</span></Button></>)
}export default App

7.props与ts——为事件prop添加类型

组件经常执行类型为函数的prop实现子传父,这类prop重点在于函数参数类型的注解
在这里插入图片描述
说明:
1.组件内部调用时需要遵守类型的约束,参数传递需要满足要求
2.绑定prop时如果绑定内联函数直接可以推断出参考类型,否则需要单独注解匹配的参数类型

// props + tstype Props = {onGetMsg?: (msg: string) => void
}function Son(props: Props) {const { onGetMsg } = propsconst clickHandler = () => {onGetMsg?.('this is msg')}return <button onClick={clickHandler}>sendMsg</button>
}function App() {const getMsgHandler = (msg: string) => {console.log(msg)}return (<><Son onGetMsg={(msg) => console.log(msg)} /><Son onGetMsg={getMsgHandler} /></>)
}export default App

8.useRef与TypeScript —— 获取dom

获取dom的场景,可以直接把要获取的dom元素的类型当成泛型参数传递给useRef,可以推导出.current属性的类型
在这里插入图片描述

// useRef + tsimport { useEffect, useRef } from 'react'// 1. 获取dom
// 2. 稳定引用的存储器(定时器管理)function App() {const domRef = useRef<HTMLInputElement>(null)const timerId = useRef<number | undefined>(undefined)useEffect(() => {// 可选链  前面不为空值(null / undefined)执行点运算// 类型守卫 防止出现空值点运算错误domRef.current?.focus()timerId.current = setInterval(() => {console.log('123')}, 1000)return () => clearInterval(timerId.current)}, [])return (<><input ref={domRef} /></>)
}export default App

8.useRef与TypeScript —— 引用稳定的存储器

把useRef当成引用稳定的存储器使用的场景可以通过泛型传入联合类型来做,比如定时器的场景:
在这里插入图片描述

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

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

相关文章

2024年美赛 (D题ICM)| 湖流网络水位控制 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看美赛的D题&#xff01; 完整内容可以在文章末尾领…

子查询练习2

数据表 链接&#xff1a;https://pan.baidu.com/s/1dPitBSxLznogqsbfwmih2Q 提取码&#xff1a;b0rp --来自百度网盘超级会员V5的分享 1.查询和Zlotkey相同部门的员工姓名和工资 2.查询工资比公司平均工资高的员工的员工号,姓名和工资 3.查询工资大于所有JOB_IDSA_MAN的员工…

Python中的单元测试框架:使用unittest进行有效测试

一、介绍 在软件开发中&#xff0c;单元测试是一种测试方法&#xff0c;它用于检查单个软件组件&#xff08;例如函数或方法&#xff09;的正确性。Python 提供了一个内置的单元测试库&#xff0c;名为 unittest&#xff0c;可以用来编写测试代码&#xff0c;然后运行测试&…

如何在 Golang 中使用 crypto/ed25519 进行数字签名和验证

如何在 Golang 中使用 crypto/ed25519 进行数字签名和验证 引言crypto/ed25519 算法简介环境搭建和准备工作生成密钥对进行数字签名 验证签名实际应用场景案例总结 引言 在当今数字化时代&#xff0c;网络安全显得尤为重要。无论是在网上进行交易、签署合同&#xff0c;还是发…

BioTech - 小分子药物设计与优化 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135998902 小分子药物设计与优化&#xff0c;是利用计算机辅助技术&#xff0c;根据特定的生物学靶点&#xff0c;发现和改进具有治疗作用的小分子…

C++ Webserver从零开始:基础知识(七)——多进程编程

前言 在学习操作系统时&#xff0c;我们知道现代计算机往往都是多进程多线程的&#xff0c;多进程和多线程技术能大大提高了CPU的利用率&#xff0c;因此在web服务器的设计中&#xff0c;不可避免地要涉及到多进程多线程技术。 这一章将简要讲解web服务器中的多进程编程&#x…

全国疫情实时监测系统(附源码)

目录 一.项目背景 1.有力支持疫情防控知识传播 2.迅速锁定“涉疫”人员流动轨迹 3.开展疫情发展态势预测与溯源 4.一图胜过千言万语&#xff01;&#xff01;&#xff01; 二.研究过程&#xff08;项目技术的利用&#xff09; 1.总述 2.所用技术介绍 2.1Python 2.2Pyt…

基于布谷鸟搜索的多目标优化matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 1. 布谷鸟搜索算法基础 2. 多目标优化问题 3. 基于布谷鸟搜索的多目标优化算法 4. 解的存储和选择策略 5.算法步骤 5.完整程序 1.程序功能描述 基于布谷鸟搜索的多目标优化&#xff0c;…

社区店加盟多少钱?费用全解及 2024 年加盟趋势

在探讨社区店加盟费用之前&#xff0c;我们首先要明确一个概念&#xff1a;社区店不仅仅是一个简单的销售点&#xff0c;更是连接品牌与消费者的桥梁。 特别是在鲜奶行业&#xff0c;社区店承载着为消费者提供新鲜、健康产品的重任。作为一名拥有多年鲜奶吧经营经验的创业者&a…

单链表的增删改查

小伙伴们&#xff0c;顺序表的增删改查已经学会了&#xff0c;今天我们学习比顺序表还难“亿”点点的链表&#xff0c;也需要增删改查。跟顺序表一样&#xff0c;还是需要创建三个文件SList.h,SList.c和test.c&#xff0c;然后做一些准备工作&#xff0c;具体文件的说明跟顺序表…

接口测试 —— Requests库介绍

1、Requests库 Requests库是用Python语言编写&#xff0c;基于urllib3模块&#xff0c;采用Apache2 Licensed开源协议的 HTTP 库。 虽然Python的标准库中urllib3模块已经包含了平常我们使用的大多数功能&#xff0c;但是它的 API使用起来让人感觉不太友好。而Requests库使用的…

【Vue3实战】TypeScript前端实战基础

【Vue3实战】TypeScript前端实战基础 前言一、TypeScript的由来二、什么是TypeScript?三、静态类型检查四、类型注解和类型推导五、可选参数和默认参数六、接口和类型别名接口接口的可选设置类型 七、类和继承接口的继承交叉类型模拟继承 八、泛型什么是泛型泛型接口泛型函数泛…

Hgame题解(第一星期)

Hgame题解&#xff08;第一星期&#xff09; Web ezHTTP 打开靶机首先看到题目提示&#xff1a;请从vidar.club访问这个页面 根据http协议&#xff0c;需要创建一个Referer字段&#xff0c;其值设置为vidar.club&#xff08;意思是从该网页跳转到靶机网页的&#xff09;&…

嵌入式系统学习(一)

嵌入式现状&#xff08;UP经历&#xff09;&#xff1a; 大厂的招聘要求&#xff1a; 技术栈总结&#xff1a; 产品拆解网站&#xff1a; 52audio 方案查询网站iotku,我爱方案网&#xff0c; 主要元器件类型&#xff1a;

【android】对于google-webrtc的性能中, memory leak

目录 zlmediakit->webrtcplay->app webrtcutil1/3 测试程序等 zlmediakit->webrtcplay->app 编译sdk 32 有时候会从开始新增5M&#xff0c;就稳定在一个值了 webrtcutil1/3 测试程序等 编译sdk 30

Oracle和Mysql数据库

数据库 Oracle 体系结构与基本概念体系结构基本概念表空间(users)和数据文件段、区、块Oracle数据库的基本元素 Oracle数据库启动和关闭Oracle数据库启动Oracle数据库关闭 Sqlplussqlplus 登录数据库管理系统使用sqlplus登录Oracle数据库远程登录解锁用户修改用户密码查看当前语…

逸学区块链【solidity】真随机数

参考Get a Random Number | Chainlink Documentation 但是很贵&#xff0c;价格 Gas Price&#xff1a;当前gas价格&#xff0c;根据网络状况而波动。Callback gas &#xff1a;返回您所请求的随机值时&#xff0c;回调请求消耗的gas 量。验证gas &#xff1a;量gas 用于验证…

Vue3学习记录(二)--- 组合式API之计算属性和侦听器

一、计算属性 1、简介 ​ 计算属性computed()&#xff0c;用于根据依赖的响应式变量的变化&#xff0c;进行自动的计算&#xff0c;并返回计算后的结果。当依赖的响应式变量发生变化时&#xff0c;computed()会自动进行重新计算&#xff0c;并返回最新的计算结果。如果依赖的…

Map和Set讲解

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 集合框架 模型 Set 常见方法和说明 Set总结 Map说明 Map常见方法和说明 Map 中HashMap的 …

Linux一些实用操作

学习笔记&#xff0c;记录以下课程中关于Linux的一些实用操作。黑马程序员新版Linux零基础快速入门到精通&#xff0c;全涵盖linux系统知识、常用软件环境部署、Shell脚本、云平台实践、大数据集群项目实战等_哔哩哔哩_bilibili 目录 1 各类小技巧&#xff08;快捷键&#xff…