React+TypeScript项目：useState - 传递泛型参数

于 2024-08-06 09:03:10 发布
阅读量182 收藏 5
点赞数 7
文章标签： react.js typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140943996
版权

useState - 传递泛型参数

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

例如：
在这里插入图片描述

1）限制useState函数参数的初始值必须满足类型：User 、或者一个返回User类型的函数。
2）限制 setUser函数的参数必须满足类型：User 、或者一个返回User类型的函数、或者undefined。
3）user状态数据具备User类型相关的类型提示。

示例

例如，useState的初始值传递的对象相比User类型少了一个字段，有出错提示：
在这里插入图片描述

在这里插入图片描述

当两个类型都有了的时候，就不报红色的出错提示了：
在这里插入图片描述

传递给useState的初始值也可以是一个函数，返回返回一个User类型的对象：
在这里插入图片描述

限制setUser函数参数的类型，可以传入一个User类型的对象：
在这里插入图片描述

限制setUser函数参数的类型，也可以是一个函数，函数返回一个User类型的对象：
在这里插入图片描述

setUser函数传入的参数可以是undefined，但这种情况不常见：
在这里插入图片描述

使用user的时候，具有User类型的提示：
在这里插入图片描述

听海边涛声
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react中 hook中的 usestate和useEffect
l529936997的博客
07-30 396
useState useState 的使用非常简单，我们从 React 中拿到 useState 后，只需要在使用的地方直接调用 useState 函数就可以， useState 会返回一个数组，第一个值是我们的 state， 第二个值是一个函数，用来修改该 state 的，那么这里为什么叫 count 和 setCount？一定要叫这个吗，这里使用了 es6 的解构赋值，所以你可以给它起任何名字，updateCount, doCount、any thing，当然，为了编码规范，所以建议统一使用一种命名规.
React-hooks+TypeScript最佳实战
xiaofeng123aazz的博客
10-17 441
自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook有时候我们会想要在组件之间重用一些状态逻辑，之前要么用 render props ，要么用高阶组件，要么使用 redux自定义 Hook 可以让你在不增加组件的情况下达到同样的目的Hook 是一种复用状态逻辑的方式，它不复用 state 本身事实上 Hook 的每次调用都有一个完全独立的 state} , [ ]);
react中利用useState操作泛型数组对象
qq_37967853的博客
11-24 3070
react中利用useState操作泛型数组对象
了解了解TypeScript
qq_45000453的博客
11-24 678
什么是TypeScript? TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 // TypeScript 代码有明确的数据类型 let age1: number = 18 //
React+TypeScript项目：useState - 自动推导
最新发布
听海边涛声
08-06 277
React+TypeScript项目：useState - 自动推导
深入学习React Hook——useState
m0_47670683的博客
04-25 2379
Hook使用规则 只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。 只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。 useState基本用法 const [state,setState] = useState(initialState) 参数 参数类型type useState右侧的<>部分是typeScript中泛型的用法，用来约束参数initialState的类型。 参数初始值initialState initia
react useState（个人笔记，非教程）
qq_44408123的博客
10-09 676
使用： const [count, setCount] = useState(0); useState() 方法里面唯一的参数就是初始 state 返回值为：当前 state 以及可以 更新 state 的函数 state 只在组件首次渲染的时候被创建。在下一次重新渲染时，useState 返回给我们当前的 state 如果我们想要在 state 中存储两个不同的变量，只需调用 useStat...
React 项目中使用 TypeScript
m0_62118859的博客
05-03 3751
1.useEffect 的使用 目标：能够掌握 useEffect 在 TS 中的使用 内容： useEffect函数不涉及到任何类型，TS 和 JS 中使用一致 useEffect(() => { const onResize = () => { console.log('哈哈哈'); }; window.addEventListener('resize', onResize); return () => { window.addEventLi
react-typescript-tutorial：React，打字稿연습
02-16
在本教程中，我们将深入探讨如何在React项目中使用TypeScript。React是一个流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。而TypeScript是JavaScript的一个超集，提供了静态类型检查、类、模块...
react+typescript正确的开发姿势之正确使用hooks之useState
追风Programer的博客
01-22 1722
写在前面 要想在react + typescript 项目中正确的使用 hooks ，请务必掌握泛型的使用，关于泛型的讲解，我在上一篇博文中详细的进行了介绍，如果你还不了解 typescript 中的泛型请看上一篇：正确认识typescript中的泛型。 如何结合typescript正确使用hooks 在react中使用函数式组件，难免会使用到hooks，hooks赋予了函数式组件可以像 class 组件那样拥有状态的能力，那么如何结合typescript正确的使用hooks呢？ 在react + type
泛型的基本知识点梳理（泛型类型参数化，接口，类，约束，参数约束，映射类型等）
ZhangYu_010228的博客
04-02 603
你可以通过前缀 - 或者 + 删除或者添加这些修饰符，如果没有写前缀，相当于使用了 + 前缀。在泛型约束中使用类型参数: 你可以声明一个类型参数，，这个时候可以考虑使用映射类型。都是通过映射类型来实现的；定义接口时也可以使用泛型。也是通过映射类型完成的；
关于reactHook中useState
Amoslb
05-07 391
import React, {useState} from ‘react’ const Buttons : React.FC=()=>{ const [count,setCount] = useState(0) return (<button onClick={()=>{setCount(count+1)}}>{count}) } export default Button...
【Typescript学习】使用 React 和 TypeScript 构建web应用（二）部分UI、useState、useRef、Props
咕咕酱没有悲伤的博客
01-26 1448
React和TypeScript构建todo列表（二），跟做
react: typescript interface useState issue
weixin_30609287的博客
07-23 336
define interface: interface ILoginState { imageId: string; imageSrc: string; username: string; password: string; verifyCode: string; } useState: const [loginData, se...
TypeScript类型--泛型类型--泛型约束
m0_62181310的博客
09-17 2554
泛型（Generics）可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、自定义类型、接口等类型中创建一个 id 函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）// 比如，该函数传入什么数值，就返回什么数值 function id(value : number) : number {比如，id(10) 调用以上函数就会直接返回 10 本身。但是，该函数只接收数值类型，无法用于其他类型。
TypeScript 中使用React Hook
Web面试那些事儿的博客
12-22 923
从 React V 16.8.0 和 React Native 0.59.0 版本开始, 引入了React Hook的概念。React Hook 在开发支持就考虑到了类型，所以很多Hook函数可以直接推断出他们的参数、返回值等类型，但也有一些场景需要我们显示声明类型。阅读本文前你需要了解React Hook 的基本用法，。下面会总结一下我们如何在 TypeScript 中使用React Hook。
TypeScript，终于在实际项目中用到了泛型。
BWater_monster的博客
01-05 200
终于在实际项目中用到了泛型~~
useState - 泛型参数与初始值null
weixin_50236973的博客
12-27 506
useState - 泛型参数与初始值null
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值