当前位置: 首页 > news >正文

react ts 定义基本类型,组件通过ref调用时类型提示

记录,以防忘记

子组件

import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react';// 类型定义方式1
interface IProps {/**参数1 */params1: number | string | undefined/**参数2 */params2: number | string | undefined/**方法 */openDialog: () => void
}// 类型定义方式2
type PaginationType = {/**当前页 */page: number,/**每页条数 */pageSize: number/**总数 */total: number
}// 这里定义ref的类型,外面调用时会有提示
export interface AppRef {/**方法说明 */report: () => void
}const App = ({ params1, params2, openDialog }: IProps, ref: Ref<AppRef>) => {const [pagination, setPagination] = useState<PaginationType>({ page: 1, pageSize: 10, total: 0 })const init = () => {console.log('------------这里执行触发');}useImperativeHandle(ref, () => ({report: () => init()}))return <>{/* 选择时会有提示 */}{pagination.page}</>
}export default forwardRef(App);

父组件

// 使用时
import React, { useRef } from 'react';
import App, { AppRef } from './app.tsx';
const AppContent = () => {// 默认子组件的ref给nullconst AppRef = useRef<AppRef>(null)// 这样调用子组件的方法时,会有提示AppRef.current?.report()return <App ref={AppRef} />
}
export default AppContent;

动态属性对象: 使用索引签名([key: string]: type)来表示对象的动态属性

interface Dictionary {[key: string]: string;
}let dict: Dictionary = { a: "apple", b: "banana" };

交叉类型(Intersection Types)

interface Person {name: string;
}interface Worker {job: string;
}type Employee = Person & Worker;let employee: Employee = { name: "John", job: "Engineer" };

数组类型

type ItemType = {id: number,name: string
}const list:Array<ItemType>=[{id: 1, name: '张三'},{id: '2', name: '李四'}]const list1:Array<string|number>=[1, '2', 3]

Partial: 将一个类型的所有属性都变为可选

interface Person {name: string;age: number;
}type PartialPerson = Partial<Person>;  // 所有属性都变为可选
let partialPerson: PartialPerson = { name: "John" };

Required: 将一个类型的所有属性都变为必需

type RequiredPerson = Required<Person>;  // 所有属性变为必需
let fullPerson: RequiredPerson = { name: "John", age: 30 };  // 必须包含 name 和 age

Pick: 从类型中选择一部分属性

type NameOnly = Pick<Person, "name">;
let nameOnly: NameOnly = { name: "John" };

相关文章:

react ts 定义基本类型,组件通过ref调用时类型提示

记录&#xff0c;以防忘记 子组件 import React, { forwardRef, Ref, useImperativeHandle, useState } from react;// 类型定义方式1 interface IProps {/**参数1 */params1: number | string | undefined/**参数2 */params2: number | string | undefined/**方法 */openDia…...

二十三种设计模式-原型模式

原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过拷贝现有的实例来创建新的实例&#xff0c;而不是通过新建实例。这种方式可以避免复杂的构造过程&#xff0c;同时还能保持对象的创建和使用分离&#xff0c;提高系统的灵活性和扩展性…...

提升汽车金融租赁系统的效率与风险管理策略探讨

内容概要 在汽车金融租赁系统这个复杂的生态中&#xff0c;提升整体效率是每个企业都渴望达成的目标。首先&#xff0c;优化业务流程是实现高效运行的基础。通过分析目前的流程&#xff0c;找出冗余环节并进行简化&#xff0c;能够帮助企业缩短审批时间&#xff0c;提高客户满…...

Spring Framework 5.3.x源码构建 (jdk-1.8, gradle 7.5.1, idea2024.3)

1、下载jdk安装并配置环境变量&#xff08;自行百度&#xff09; https://www.oracle.com/java/technologies/downloads/#java8 2、下载spring-framework源码&#xff0c;切换分支到5.3.x https://github.com/spring-projects/spring-framework.git 备用地址 https://gitco…...

leetcode 2241. 设计一个 ATM 机器 中等

一个 ATM 机器&#xff0c;存有 5 种面值的钞票&#xff1a;20 &#xff0c;50 &#xff0c;100 &#xff0c;200 和 500 美元。初始时&#xff0c;ATM 机是空的。用户可以用它存或者取任意数目的钱。 取款时&#xff0c;机器会优先取 较大 数额的钱。 比方说&#xff0c;你想…...

IO模型与NIO基础

File类 File类主要是JAVA为文件这块的操作(如删除、新建等)而设计的相关类File类的包名是java.io&#xff0c;其实现了Serializable, Comparable两大接口以便于其对象可序列化和比较 创建一个文件/文件夹 删除文件/文件夹 获取文件/文件夹 判断文件/文件夹是否存在 对文件夹进…...

上门按摩系统架构与功能分析

一、系统架构 服务端&#xff1a;Java&#xff08;最低JDK1.8&#xff0c;支持JDK11以及JDK17&#xff09;数据库&#xff1a;MySQL数据库&#xff08;标配5.7版本&#xff0c;支持MySQL8&#xff09;ORM框架&#xff1a;Mybatis&#xff08;集成通用tk-mapper&#xff0c;支持…...

ubuntu安装ssh9.2

删除旧版本&#xff1a; dpkg --list|grep ssh apt remove sshwget https://ftp.openbsd.org/pub/OpenBSD/OpenSSH/portable/openssh-9.2p1.tar.gz tar xzvf openssh-9.2p1.tar.gz cd openssh-9.2p1 #下载依赖#开始编译安装 ./configure && make && make inst…...

linux wsl配置 redis远程连接

✅ 1. 修改 Redis 配置文件 在 WSL 的 Redis 配置文件中&#xff0c;找到 redis.conf 或 /etc/redis/redis.conf 文件&#xff0c;编辑以下配置项&#xff1a; ➡️ 更新 bind 配置项 将 bind 127.0.0.1 ::1 修改为&#xff1a; bind 0.0.0.0这样&#xff0c;Redis 将监听所…...

JVM 优化指南

JVM 优化指南 1. JVM 参数配置 1.1 基础参数配置 设置堆内存大小 -Xms2048m -Xmx2048m 设置新生代大小 -Xmn1024m 设置元空间大小 -XX:MetaspaceSize256m -XX:MaxMetaspaceSize256m 设置线程栈大小 -Xss512k1.2 垃圾回收器配置 使用 G1 垃圾回收器 -XX:UseG1GC 设置期望停顿…...

关机重启后,GitLab服务异常

整理机房,关闭了所有主机重新上架。 上架后开机,所有主机硬件启动正常。 其中一台GitLab服务器启动正常,使用gitlab-ctl status查看服务业正常。 但使用web登陆却失败,如下图: 反复测试,发现无论使用正确密码还是错误密码都是同样的提示。很大可能是数据库的问题。 使…...

谷粒商城-高级篇完结-Sleuth+Zipkin 服务链路追踪

1、基本概念和整合 1.1、为什么用 微服务架构是一个分布式架构&#xff0c;它按业务划分服务单元&#xff0c;一个分布式系统往往有很多个服务单元。由于服务单元数量众多&#xff0c;业务的复杂性&#xff0c;如果出现了错误和异常&#xff0c;很难去定位 。主要体现在&#…...

C语言基本知识复习浓缩版:标识符、函数、进制、数据类型

C语言基本知识复习浓缩版&#xff1a;标识符、函数、进制、数据类型 【c语言期末复习3小时速成【完整全集】期末速成含考试题c语言期末速成突击复习C语言补考C语言期末大一】 B站看到的复习C语言视频&#xff0c;感觉非常棒&#xff0c;就跟着进行了一下学习。众所周知&#…...

selenium已经登陆了 我怎么查看 网页 在fRequest xhr 的数据呢

在使用 Selenium 登录网页后&#xff0c;查看网页的 XHR 请求数据可以通过以下几种方法&#xff1a; ### 1. 使用浏览器开发者工具 - **手动查看**&#xff1a; - 打开浏览器的开发者工具&#xff08;按 F12 或右键点击页面元素选择“检查”&#xff09;。 - 切换到“Netw…...

Bash语言的数据库编程

Bash语言的数据库编程 引言 在现代软件开发中&#xff0c;数据库编程是一个不可或缺的部分。从小型项目到大型系统&#xff0c;数据库通常是存储和管理数据的核心。然而&#xff0c;许多开发者往往将焦点放在高级编程语言如Python、Java或C#上&#xff0c;忽视了Shell脚本语言…...

易支付二次元网站源码及部署教程

易支付二次元网站源码及部署教程 引言 在当今数字化时代&#xff0c;二次元文化逐渐成为年轻人生活中不可或缺的一部分。为了满足这一庞大用户群体的需求&#xff0c;搭建一个二次元主题网站显得尤为重要。本文将为您详细介绍易支付二次元网站源码的特点及其部署教程&#xf…...

ios脚本巨魔商店多巴胺越狱基本操作教程

准备工作 确认设备兼容性&#xff1a;A9-A11&#xff08;iPhone6s&#xff0d;X&#xff09;&#xff1a;iOS15.0-16.6.1&#xff1b;A12-A14&#xff08;iPhoneXR&#xff0d;12PM&#xff09;&#xff1a;iOS15.0-16.5.1&#xff1b;A15-A16&#xff08;iPhone13&#xff0d…...

ScratchLLMStepByStep:SFT之分类微调

1. 引言 前面我们花了三节内容来介绍预训练&#xff0c;包括如何从零搭建、如何加速运算、如何分布式加速训练&#xff0c;本节开始我们将进入监督微调&#xff08;SFT&#xff09;阶段。 常见语言模型的微调任务有两类&#xff0c;分类微调和指令微调。 分类微调模型通常是…...

人工智能知识分享第十天-机器学习_聚类算法

聚类算法 1 聚类算法简介 1.1 聚类算法介绍 一种典型的无监督学习算法&#xff0c;主要用于将相似的样本自动归到一个类别中。 目的是将数据集中的对象分成多个簇&#xff08;Cluster&#xff09;&#xff0c;使得同一簇内的对象相似度较高&#xff0c;而不同簇之间的对象相…...

MySQL和Hive中的行转列、列转行

水善利万物而不争&#xff0c;处众人之所恶&#xff0c;故几于道&#x1f4a6; 文章目录 MySQL1.行转列2.列转行 Hive1.行转列2.列转行(1)侧窗(2)union MySQL 1.行转列 把多行转成列。直接group&#xff0c;sum(if()) 2.列转行 Hive 1.行转列 select name,sum(if(kmshuxu…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...