React+TypeScript项目：useState - 初始值为null的场景

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

说明

当我们不知道状态的初始值是什么，将useState函数参数的初始值设置为null是一个常见的做法。可以通过具体类型联合 null来做显示注解。

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

1）限制useState函数参数的初始值可以是User、或者null。
2）限制setUser函数的参数类型可以是User、或者null。

示例

在这里插入图片描述

使用user的时候，给出提示：
在这里插入图片描述

如果选择age，然后回车，编辑器自动补充了一个可选链语法user?.age，这个是为了类型安全，只有user不为null(不为空值)的时候，才进行点运算：
在这里插入图片描述

将鼠标移到user上方，给出提示，可能是User类型，也可能是null：
在这里插入图片描述

听海边涛声
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Hook + TypeScript + styled-component 建站
尐轩web前端网络日志
06-08 1088
技术选型 Vue 与 React 的对比 组件化 Vue 的组件化是将 UI 结构（template）、UI 样式（style）、数据与业务逻辑（script）都放在一个 .vue 的文件中，运行前 .vue 文件会被编译成真正的组件； React 的组件化是直接通过 JS 代码的形式实现组件 模板引擎 Vue的视图模板使用类 HTML 的写法加上属性与指令，多数情况下要比 React 的 JSX 写法清晰且开发效率高，但是在复杂场景下，Vue 的写法有时会比 React 写起来更麻烦 数据监听 Vue
react-avancado:ReactAvançado
03-22
3. **利用TypeScript的null/undefined检查**：防止由于未初始化或者意外的null/undefined值导致的运行时错误。 4. **更精确的函数返回类型**：为React事件处理函数和生命周期方法指定准确的返回类型，增加代码的严谨...
从零开始搭建React+TypeScript项目
熊小露的博客
03-04 1368
主要的依赖： React16.12+ TypeScript3+ tslint5+ react-router5+ react-redux7+ axios0.19+ element-ui1.4+ SCSS4.13+ 环境版本要求： Node >= 8.10 npm >= 5.6 首先安装 React 框架和类型库，有两种方式： 方法1： npx create-react-app my-app --typescript 方法2： npx create-react-
从零开始搭建React+TypeScript+webpack开发环境-基础配置
断线的风筝
10-29 270
return {visitor: {if () {${return {const {// 检查 state.file.metadata 是否存在，不存在则初始化为空对象 if(!} // 检查 state.file.metadata.fileModules 是否存在，不存在则初始化为空数组 if(!} // 将需要启用 CSS Modules 的文件路径保存到文件属性中 const filePath = state . file . opts . filename;
React+Antd+Vite+TypeScript 项目实战教程
IT飞牛
05-10 4983
本教程属于react入门教程，课程围绕如何搭建一个简单的登录页面展开，会带你快速了解react、redux、redux-devtool、react-router-dom、axiox这些常见技术的使用方式，教程最后会附上项目源码。
React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 01 基础配置
皮蛋很白的博客
08-30 665
页面预览 该实战项目是（不怎么严谨的）电子商务网站。 首页 商品列表页面 登录页面 注册页面 购物车列表 支付完成页面 Dashboard 页面 普通用户页面 购买历史页面 资料更新页面 管理员页面 创建分类页面 创建商品页面 订单列表页面 显示所有用户的订单 客户端技术栈介绍 脚本：TypeScript 前端框架：React 路由管理：react-router-dom 用户界面：Ant Design 全局状态管理：Redux 一部状态更新：redux-saga 路由状态同步：co
#22 使用Vite创建React+Typescript项目
保持学习的态度
03-27 1373
Profile。
react+typescript正确的开发姿势之正确使用hooks之useState
追风Programer的博客
01-22 1707
写在前面 要想在react + typescript 项目中正确的使用 hooks ，请务必掌握泛型的使用，关于泛型的讲解，我在上一篇博文中详细的进行了介绍，如果你还不了解 typescript 中的泛型请看上一篇：正确认识typescript中的泛型。 如何结合typescript正确使用hooks 在react中使用函数式组件，难免会使用到hooks，hooks赋予了函数式组件可以像 class 组件那样拥有状态的能力，那么如何结合typescript正确的使用hooks呢？ 在react + type
React+Typescript最佳实践
weixin_42826294的博客
02-21 1911
React+Typescript最佳实践 前言 随便叨叨一句，TypeScript是一个JavaScript的类型化超集，可以编译成纯JavaScript，比如随便新建一个index.ts文件，随便来个函数，然后cd到该文件，执行tsc index.ts就可以编译成js文件了，当然前提是全局安装了typescript。 关于typescript的好处，网上一大把原因，这里不赘述，从我的开发经验看： Typescript是一门静态类型语言，可以在开发的过程中暴露出很多不经意的问题，从而减少bug，测试也更
使用 React18 + Vite + TypeScript 完成公司项目经验总结，学到了很多
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-10 1494
当前找工作环境恶劣，很多求职者表示招聘不仅要求会 vue，还要求会 react。刚好这段时间我用 React18 + Vite + TS 为公司从 0 到 1 开发了一个项目，就顺便总结了一些前端开发知识和技巧，帮助我记忆这些知识的同时，希望能对你也有所启发。欢迎评论区交流。我会把代码（当然不是真实项目的。。）上传到 GitHub 上，文末可以取链接。最后还请多多评论、点赞支持！废话不多说，下面开...
TypeScript Handbook（中文版）typescript-handbook.pdf
01-03
- TypeScript可以根据初始化值自动推断变量的类型，简化了类型声明。 - 示例：`let myFavoriteNumber = 7; // 自动推断为 number` 9. **类型兼容性**： - 类型兼容性是指一种类型可以赋值给另一种类型的情况。 ...
react-hooks:React钩的集合
03-06
在这个例子中，`useState` 初始化了一个名为`count`的状态，并返回一个更新它的函数`setCount`。 2. useEffect `useEffect` 用于处理副作用，如数据获取、手动更改DOM、订阅和清理工作。它接收两个参数：一个执行副...
react-hooks
03-20
在上述代码中，useState 被声明为接收 User 类型的初始值，返回值也包含一个 User 类型的状态和一个更新状态的方法。 通过这些 Hooks，React 函数组件可以实现与类组件相同的功能，同时保持代码简洁、易于理解和...
ts-react
03-26
// 定义一个名为count的状态变量，初始值为0 const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <p>You clicked {count} times ...
React 知识点（一）
措手不及ya的博客
08-05 587
React 使用，三、创建元素练习，JSX 使用，JSX 嵌入表达式，JSX条件渲染方式，JSX 列表渲染，JSX样式-style 操作，JSX样式-className 方式
打造智能家居：用React、Node.js和WebSocket构建ESP32设备控制面板（代码说明）
嵌入式极客小张
08-05 869
在物联网（IoT）时代，智能设备的远程控制变得越来越重要。本文介绍了一个构建智能设备控制面板的项目，允许用户通过 Web 应用来控制多个 ESP32 设备。用户可以通过该面板查看设备列表，实时了解设备状态，并对设备进行操作（例如开关、调节亮度等）。在本项目中，我们构建了一个智能设备控制面板，用户可以通过 Web 应用控制多个 ESP32 设备。
React基础
guai_guai_guai的博客
08-05 711
/1.创建函数式组件//此处的this是undefined，因为babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>//2.渲染组件到页面</script>执行了ReactDOM.render(<MyComponent/> ....)之后，发生了什么？React解析组件标签，找到了MyComponent组件发现组件是使用函数定义的，随后调用函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
react如何父子组件传参
最新发布
ggq53219的博客
08-05 259
在React中，父子组件之间的传参主要通过props（属性）来实现。子组件通过props接收来自父组件的数据，而父组件则可以通过在子组件标签上设置属性（即props）来传递数据。下面是一个简单的例子来说明这个过程。
在react+typescript使用react-barrage
05-12
React-barrage是一个React组件库，提供了在页面上展示弹幕的功能。在使用react-barrage之前，你需要先在项目中安装它： ``` npm install react-barrage --save ``` 然后在你的组件中使用它： ```tsx import React, { useCallback, useEffect, useState } from 'react'; import { Barrage, BarrageItem } from 'react-barrage'; interface Message { text: string; time: number; } const BarrageComponent: React.FC = () => { const [messages, setMessages] = useState<Message[]>([]); useEffect(() => { // 模拟异步获取弹幕数据 const timer = setInterval(() => { const now = Date.now(); setMessages(prevMessages => [ ...prevMessages, { text: `弹幕${now}`, time: now } ]); }, 1000); return () => clearInterval(timer); }, []); const renderItem = useCallback(({ text }) => { return <div>{text}</div>; }, []); return ( <Barrage> {messages.map(message => ( <BarrageItem key={message.time} text={message.text} render={renderItem} /> ))} </Barrage> ); }; export default BarrageComponent; ``` 这里的Barrage组件是弹幕的容器，而BarrageItem则是每一条弹幕。你需要将需要展示的弹幕数据传递给BarrageItem，并通过render函数来渲染每一条弹幕的内容。在上面的例子中，我们使用了useState来存储弹幕数据，并使用useEffect模拟异步获取数据的过程。当组件挂载后，我们每隔一秒钟就会向弹幕数据中添加一条新的弹幕数据，并将其展示在页面上。 需要注意的是，由于react-barrage是基于canvas实现的，因此在使用时需要注意一些性能问题。如果弹幕太多或太长，可能会导致页面卡顿或者崩溃。因此，在使用时需要根据实际情况来控制弹幕的数量和长度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值