React与TypeScript

React创建项目方式

  1. react脚手架:create-react-app 项目名 --template typescript
  2. 基于vite创建项目:npm init vite@latest 项目名 – --template react-ts

useState自动推导

通常React会根据传入useState的默认值来自动推导类型,不需要显示标注类型
const [value, toggle] = useState(false)

  1. value:类型为boolean
  2. toggle:参数类型为boolean

useState传递泛型参数

useState本身是一个泛型参数,可以传入具体的自定义类型
type User = { name: string, age: number }
const [user, setUser] = useState()

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

useState初始值为null

当我们不知道状态的初始值是什么,将useState的初始值为null是一个常见的做法,可以通过具体类型联合null来做显式注解
type User = { name: string, age: number }
const [user, setUser] = useState<User | null>(null)

  1. 限制useState函数参数的初始值可以是User | null
  2. 限制setUser函数的参数类型可以是User | null
  3. 为了类型安全,可选链做类型守卫:user?.name

props 与 Typescript

props 与 Typescript基础使用

为组件prop添加类型,本质是给函数的参数做类型注解,可以使用type对象类型或者interface接口来做注解

// 方式一:type
// type Props = {
//     className: string
// }// 方式二:interface
interface Props {className: string,
}function Button(props: Props) {const {className} = propsreturn <button className={className}>点击</button>
}function App() {return (<><Button className={'test'}/></>)
}export default App

props与TypeScript 为children添加类型

children是一个比较特殊的prop,支持多种不同类型数据的传入,需要通过一个内置的ReactNode类型来做注解
注解之后,children可以是多种类型,包括:React.ReactElement、string、number、React.ReactFragment、React.ReactProtal、boolean、null、undefined

import * as React from "react";// type
// type Props = {
//     className: string
// }// interface
interface Props {className: string,children: React.ReactNode
}function Button(props: Props) {const {className, children} = propsreturn <button className={className}>{children}</button>
}function App() {return (<><Button className={'test'}>点击</Button><Button className={'test'}><span>aaa</span></Button></>)
}export default App

propTypes 与 TypeScript 为事件prop添加类型

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

type Props = {onGetMsg?: (msg: string) => void
}function Son(props: Props) {const {onGetMsg} = propsconst clickHandler = () => {onGetMsg?.('hello')}return <button onClick={clickHandler}>点击</button>
}function App() {const getMsgHandler = (msg:string) => {console.log(msg)}return (<><Son onGetMsg={(msg) => console.log(msg)}></Son><Son onGetMsg={getMsgHandler}></Son></>)
}export default App

useRef与Typescript

useRef与Typescript 获取dom

获取dom的场景,可以直接把要获取的dom元素当成泛型参数传递给useRef,可以推导出.current属性的类型

import {useEffect, useRef} from "react";function App() {const domRef = useRef<HTMLInputElement>(null)useEffect(()=>{domRef.current?.focus()},[])return (<><input ref={domRef}/></>)
}export default App

useRef与Typescript 引用稳定的存储器

把useRef当成稳定的存储器使用的场景可以通过泛型传入联合类型来做,比如定时器的场景

import {useEffect, useRef} from "react";function App() {const timerRef = useRef<number | undefined>(undefined)useEffect(()=>{timerRef.current = setInterval(() => {console.log('run')},1000)return () => clearInterval(timerRef.current)},[])return (<>hello</>)
}export default App

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

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

相关文章

数据结构练习题5(链表和栈)

1环形链表 II 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测…

vue实现富文本编辑器上传(粘贴)图片 + 文字

vue实现富文本编辑器上传&#xff08;粘贴&#xff09;图片 文字 1.安装插件 npm install vue-quill-editor -s2.在使用vue-quill-editor富文本的时候&#xff0c;对于图片的处理经常是将图片转换成base64&#xff0c;再上传数据库&#xff0c;但是base64不好存储。 原理&a…

十七、行为型(命令模式)

命令模式&#xff08;Command Pattern&#xff09; 概念 命令模式是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使您可以使用不同的请求对客户进行参数化&#xff0c;排队请求&#xff0c;以及支持可撤销操作。通过这种模式&#xff0c;调用操作的…

全面指南:中国人工智能大模型技术创新与应用

近期&#xff0c;中国人工智能协会发布了《中国人工智能大模型技术白皮书》&#xff0c;涵盖了大模型发展历程、关键技术、困难及挑战以及未来发展的展望。 在此本文总结了下白皮书的主要内容&#xff0c;并附上白皮书~ 目录第 1 章 大模型技术概述 ........................…

基础数据结构——队列(双端队列,优先级队列,阻塞队列)

双端队列、队列、栈对比 定义特点队列一端删除&#xff08;头&#xff09;另一端添加&#xff08;尾&#xff09;First In First Out栈一端删除和添加&#xff08;顶&#xff09;Last In First Out双端队列两端都可以删除、添加优先级队列优先级高者先出队延时队列根据延时时间…

微信小程序地图功能开发:绘制多边形和标记点

在微信小程序中&#xff0c;地图功能是一个常见的需求&#xff0c;尤其是在需要展示地理位置、导航指引或区域覆盖的应用中。本文将通过一个实际的微信小程序地图组件示例&#xff0c;介绍如何在地图上绘制多边形区域和标记点&#xff0c;以及如何响应用户的点击事件。 项目背景…

V2X介绍

文章目录 什么是V2XV2X的发展史早期的DSRC后起之秀C-V2XC-V2X 和DSRC 两者的对比 什么是V2X 所谓V2X&#xff0c;与流行的B2B、B2C如出一辙&#xff0c;意为vehicle to everything&#xff0c;即车对外界的信息交换。车联网通过整合全球定位系统&#xff08;GPS&#xff09;导…

实操 maxkey对接三方文档

实操 maxkey 对接三方文档 概述前置准备&#xff1a;MaxKey 安装与配置&#xff1a;第三方系统准备网络环境 对接三方配置oauth2协议对接导入jar包&#xff08;调接口&#xff09;权限加回调重定向获取token处理业务 api对接三方获取api凭证配置 MaxKey更新代码 概述 最近在搞m…

【华为HCIP实战课程十六】OSPF虚链路Vlink,网络工程师

一、vlink续 区域内部的路由优于区域之间的路由,区域之间优于外部路由,外部路由类型1优于外部类型2 只有同一级别的路由才会对比cost <R3>tracert 11.1.1.1 traceroute to 11.1.1.1(11.1.1.1), max hops: 30 ,packet length: 40,press CTRL_C to break 1 10.1.35.5 …

2024年808数据结构答案

1.已知带头结点单链表&#xff0c;H为头指针。设计一个算法&#xff0c;查找到链表的第m个结点(不包含头结点)&#xff0c;并将元 素值为X的结点插入到该结点后&#xff0c;形成一个新的链表。 // 定义单链表节点结构 typedef struct Node {int data;struct Node* next; } Nod…

fluent-ffmpeg操作MP3文件深入解析

软考鸭微信小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 引言 fluent-ffmpeg是一个功能强大的Node.js库&#xff0c;它为FFmpeg提供了一个流畅的接口。FFmpeg是一个著名的多媒体框架&#xff0c;以处理音频、视频和…

three融合GIS创建地球模型(二)

创建一个地球模型通常涉及到使用纹理贴图来给球体添加地球表面的图像。在 Three.js 中&#xff0c;你可以通过加载一张地球的图片作为纹理&#xff0c;并将其应用到一个 SphereGeometry 上来实现这一点。以下是如何完成这个过程的一个基本示例&#xff1a; 步骤 1: 设置场景、…

rust入门基础总结

文章目录 前言1、输出格式规范一、占位符相关&#xff08;一&#xff09;{}与{:?} 二、参数替换方式&#xff08;一&#xff09;位置参数&#xff08;二&#xff09;具名参数 三、格式化参数&#xff08;一&#xff09;宽度&#xff08;二&#xff09;对齐&#xff08;三&…

php生成PDF文件(FPDF)

FPDF即“Free PDF”&#xff0c;FPDF类库提供了基本的PDF创建功能&#xff0c;其源代码和使用权是免费的。 PDF格式文档优势 通用&#xff1a;PDF文档在UNIX和Windows系统均可正常使用。 安全&#xff1a;PDF文档可设置为只读模式&#xff0c;并且可以添加密码等保护措施。 美…

【JDK、Maven、Git、PostgreSQL】VSCode后端开发环境配置样例

文章目录 一、文件下载1 Maven早期版本下载安装1.1 文件下载1.2 设置系统变量1.3 查看是否设置成功1.4 设置MAVEN的本地仓库 和 镜像等内容 2 Git 下载安装3 下载并安装PostgreSQL 103.1 下载并安装3.2 配置系统环境变量 4 在VScode中下载扩展包5 在VSCode中为项目配置JDK 二、…

Maven 的使用:在 IDEA 中配置 Maven 的超详细步骤

一、概述 记录时间 [2024-10-20] Maven 用来管理 Java 项目中的依赖。 为什么要进行 Maven 配置呢&#xff1f;IDEA 默认选择内置的 Maven 仓库&#xff0c;但是不好用。 本文所讲述的 Maven 配置可以说是超详细的&#xff01; 从下载 Maven 这个东西开始&#xff0c;修改它…

sql-labs靶场第十七关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、寻找注入点 2、注入数据库 ①寻找注入方法 ②爆库&#xff0c;查看数据库名称 ③爆表&#xff0c;查看security库的所有表 ④爆列&#xff0c;查看users表的所有列 ⑤成功获取用户名…

基于微信小程序的智能校园社区服务推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

华为eNSP:端口安全

一、什么是端口安全 端口安全是指保护计算机端口免受未经授权的访问、攻击或滥用的一种措施。计算机上的每个服务或应用程序都依靠特定的端口进行通信。端口安全的目的是限制对计算机端口的访问&#xff0c;确保只有经过授权的用户或服务可以使用这些端口。通过配置防火墙、访…

线性可分支持向量机的原理推导 标准优化目标 公式解析

本文是将文章《线性可分支持向量机的原理推导》中的公式单独拿出来做一个详细的解析&#xff0c;便于初学者更好的理解。 公式 9-6 是从之前的最大化间隔问题&#xff08;公式 9-4 和 9-5&#xff09;推导出来的支持向量机&#xff08;SVM&#xff09;的优化问题。它表示的是一…