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.hqwc.cn/news/447666.html

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

相关文章

【C++】文件IO

目录 一、C语言的输入输出二、流的概念三、operator bool四、C文件IO流ifstream和ofstreamostringstream和istringstreamstringstream 一、C语言的输入输出 C语言中我们用到的最频繁的输入输出方式就是 scanf() 和 printf()。 scanf()&#xff1a; 从标准输入设备&#xff08…

GitHub的使用操作

记得看目录哦&#xff01; 1. 创建仓库2. 下载desktop3. 把创建的库克隆到本地4. 文件拷贝到本地仓库![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7171ac6c4ca14e3b8d22717121f79c9e.png)5. 在网址后面加/compare进行比较6. 给系统添加功能 1. 创建仓库 2. 下载…

微信小程序 安卓/IOS兼容问题

一、背景 在开发微信小程序时&#xff0c;不同的手机型号会出现兼容问题&#xff0c;特此记录一下 二、安卓/IOS兼容问题总结 2.1、new Date()时间转换格式时&#xff0c;IOS不兼容 问题&#xff1a;在安卓中时间格式2024-1-31 10:10:10&#xff0c;但是在iOS中是不支持 &q…

LeetCode383. 赎金信

383. 赎金信 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#xff1…

工业智能网关构建智慧污水处理远程监测及管理

污水处理厂是为了处理生活污水和工业废水而建立的设施。为了监测和控制污水处理过程&#xff0c;现代污水处理厂采用了智能工业网关物联网技术。智慧污水系统能够通过工业网关远程监测厂内各个环节的运行情况&#xff0c;提高处理效率和管理水平。 智能工业网关能够将不同设备…

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

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

9 个成功的会员网站案例

对于许多数字创作者来说&#xff0c;会员网站可以改变游戏规则。 当您建立一个会员网站时&#xff0c;您不仅会提高收入。也可以根据您的主题或想法创建有意义的业务。围绕这种想法将人们联系起来。 如果您正在考虑创建一个会员网站 或想要修改您的会员网站&#xff0c;我们将…

【Chrono Engine学习中总结】1-安装配置与程序运行

本文仅用于个人安装记录。 官方安装教程 https://api.projectchrono.org/8.0.0/tutorial_install_chrono.html Windows下安装 windows下安装就按照教程好了。采用cmake-gui进行配置&#xff0c;建议首次安装只安装核心模块。然后依此configure下irrlicht&#xff0c;sensor…

vue3前端开发,element-plus前端框架探秘:scope对象

vue3前端开发&#xff0c;element-plus前端框架探秘:scope对象&#xff01;我们经常需要对当前行的数据进行操作&#xff0c;比如增加&#xff0c;删除&#xff0c;编辑等&#xff0c;为此我们需要传递当前行所对应的唯一主键,通常情况下&#xff0c;当前行对应的业务主键是id属…

Camille-学习笔记-web基础知识

web基础1.系统架构 B/S :Browser/Server 网站 界面层&#xff08;UI&#xff09; 业务逻辑层&#xff08;业务&#xff09; 数据访问层&#xff08;数据库&#xff09; 静态网页&#xff1a;和服务器没有数据交互 动态网页&#xff1a;网页数据可以和服务器进行数据交互 URL…

C++学习Day01之C++对C语言增强和扩展

目录 一、程序及输出1.1 全局变量检测增强1.2 函数检测增强1.3 类型转换检测增强1.4 struct增强1.5 bool类型扩展1.6 三目运算符增强1.7 const增强1.7.1 全局Const对比1.7.2 局部Const对比1.7.3 Const变量初始化数组1.7.3 Const修饰变量的链接性 二、分析总结 一、程序及输出 …

React + react-device-detect 实现设备特定的渲染

当构建响应式网页应用时&#xff0c;了解用户正在使用的设备类型&#xff08;如手机、平板或桌面&#xff09;可以帮助我们提供更优化的用户体验。本文将介绍如何在 React 项目中使用 react-device-detect 库来检测设备类型&#xff0c;并根据不同的设备显示不同的组件或样式。…