解决在React项目中使用TS导致属性类型丢失的问题

最新推荐文章于 2024-02-28 11:33:30 发布
最新推荐文章于 2024-02-28 11:33:30 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 踩坑 文章标签： 前端 react ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44346509/article/details/122475098
版权

在当前的react项目中，我想获取todoReducer中的list数组，却报错

将鼠标上移到state，我们可以发现，当前state的类型是DefaultRootState

使用Ctrl+鼠标左键一路从useSelector-->DefaultRootState点进去，就能找到redux类型文件，可以发现，接口DefaultRootState是一个空对象，所以他不会存在你当前想要拿到的属性

 

 

解决办法：

将下方两句代码放入store/index.ts中

export type RootState = ReturnType<typeof store.getState>;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

这个解决办法是官方文档提供的，有兴趣可以查阅此文档

Usage With TypeScript | Redux 中文官网

 

 

 

小孙小孙爱学习
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript系列--基础
zhaohuanzh的博客
05-19 1379
官网定义：Typed JavaScript at Any Scale-------添加了类型系统的JavaScript,适用于任何规模的项目 上面这句话强调了TypeScript最重要的两个特性：类型系统、适用于任何规模 从TypeScript名字就可以看出来它的核心特性—类型 1、TypeScript是添加了类型系统的JavaScript，适用于任何规模的项目 2、TypeScript是一门静态类型，弱类型的语言 3、TypeScript是完全兼容JavaScript的，它不会修改JavaScript.
详解如何优雅地在React项目中使用Redux
08-28
主要介绍了详解如何优雅地在React项目中使用Redux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
MRlaochen的博客
08-24 2万+
在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护 组件树层级变浅，
在React项目中使用Eslint代码检查工具及常见问题
10-17
主要介绍了在React项目中使用Eslint代码检查工具及常见问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
TypeScript 中接口定义一些属性 , 属性可能不存在 , 或者你想允许一个接口有任意类型的其他属性 , 可选属性 和 索引签名
最新发布
qq_42391246的博客
02-28 496
在 TypeScript 中，如果你想为接口定义一些属性，这些属性可能不存在，或者你想允许一个接口有任意类型的其他属性，你可以使用可选属性和索引签名。
react18-代码规范-ts-仿网易云项目
wyh666csdn的博客
01-13 948
因为react创建项目不像vue会提示需要按照xxx，react默认创建出的项目是不包含其他东西的，我们想集成typescript时，可以追加参数删掉一些无用文件变成下图我们会发现一个文件此文件引用特定于使用Create React App启动的项目的TypeScript类型声明。这些类型声明添加了对导入资源文件的支持，如bmp、gif、jpeg、jpg、png、webp和svg。它还添加了对导入CSS模块的支持。
TypeScript配置react-redux reduxjs/toolkit
qq_43331318的博客
05-14 1178
React项目中TypeScript配置redux react-redux reduxjs/toolkit
对react+ts项目中的useSelector进行类型封装
weixin_47121832的博客
01-24 920
对react+ts项目中的useSelector进行类型封装
前端面试高频精讲（三）React 篇
Clytza的博客
05-26 863
一个组件作为参数传入另一个组件中，返回一个新的组件，这个新的组件拥有这两个组件的功能和优点。例如 withRoute兼容所有浏览器，更好的跨平台;将事件统一存放在一个数组，避免频繁的新增与删除 (垃圾回收)方便 react 统一管理和事务机制。
第十四章 React之Redux状态管理库
Etc.End的博客
12-12 1330
新建src/hooks/useAppSelector.tsx文件新建src/hooks/useAppDispatch.tsx文件React Redux提供了统一的、可预测的状态管理方案，使得开发者能够更好地组织和管理应用的状态。它通过使用单一数据源、不可变性和纯函数等核心概念，提供了一种可靠的状态管理方式，减少了状态管理方面的困惑和错误。良好的状态管理能够提高应用的可维护性、可扩展性和可测试性。
useSelector用法
qq_32094783的博客
08-06 2万+
作用：共享状态,从Redux的store中提取数据（state） const num=useSelector(state=>state.num)
《二》react-redux
花铛
01-05 545
是 Facebook 开发的 React 插件库，能更方便地在 React 中使用 Redux。之前分别学过的 React 和 Redux 的部分是不变的，就是将 Redux 中的 Store 和 React 中的组件联系在一起。
详解React项目中碰到的IE问题
10-17
主要介绍了React项目中碰到的IE问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用useSelector useDispatch 替代connect
w候人兮猗
12-12 1万+
前言 随着react hooks越来越火，react-redux也紧随其后发布了7.1(https://react-redux.js.org/api/hooks#using-hooks-in-a-react-redux-app)版本 首先是几个API useSelector() const result : any = useSelector(selector : Function, equa...
useSelector、useDispatch、useStore优化useContext替换redux
qq_42471343的博客
07-26 717
redux-react-hook写法，react-edux的useSelector、useDispatch、useStore优化useContext
解决Vue3的ts报错：类型“{}”上不存在属性“xxx”，三种方法彻底根治
热门推荐
05-09 3万+
网上找了各种原因，有让添加jsconfig.json文件的，有让新建一个项目的，有的直接放弃ts的，哈哈哈，真的是千奇百怪都有，好吧，我这里就也出一种方法，不要用vscode了，使用WebStorm，哈哈哈，可能让你也想不到吧，但是真的有效啊：请看效果，就不报错了，撒花。
React——redux 状态管理
qq812457115的博客
11-02 218
【代码】React——redux 状态管理。
react无效渲染优化--工具篇
行星飞行的博客
02-13 703
造成无效渲染的第二大原因就是引用数据类型引用不稳定所导致，举个最简单的例子，组件A渲染前后都接受了一个空数组，且两次数组的引用都不同，这对于组件而言因为引用不同所以是新数据自然得再次渲染，但对于研发而言，我们心里其实是知道这是无意义的，所以如何保证其引用的稳定性就是解决无效渲染的核心了。而言，它一定是只帮你找出无效渲染，且理由都是上面这种引用数据前后完全一样，只是单纯的引用不同，如何保证引用那么又回到了上文提到的减少无效渲染的手段，如果一个组件一个无效渲染提示都没有，那说明这个组件非常健康。
React与Redux Toolkit的简单使用、ts环境中一些常见问题的解决方案
wang_9909的博客
12-10 2592
安装 创建react+redux的TS环境（最佳实践） 无须再安装redux、redux-thunk、react-redux、immer等，默认就已经集成了@reduxjs/toolkit的Redux架构 create-react-app react-admin --template redux-typescript 参考链接：https://github.com/reduxjs/cra-template-redux-typescript 代理库 ...
less在react项目中的使用
08-15
在 React 项目中使用 Less，你需要进行以下步骤： 1. 安装 Less：在项目根目录下运行以下命令来安装 Less 和 Less 编译器： ``` npm install less less-loader --save-dev ``` 2. 配置 Webpack：如果你使用的是 Create React App（CRA）脚手架，Webpack 配置已经预先设置好了。如果你使用自定义的 Webpack 配置，需要在配置文件中添加相应的 Loader。 在 Webpack 配置文件中，找到对应的 `module.rules` 或 `module.loaders` 部分，添加以下配置： ```javascript { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ``` 这个配置会告诉 Webpack 当遇到 `.less` 后缀的文件时，使用 `style-loader`、`css-loader` 和 `less-loader` 来处理它们。 3. 在组件中引入 Less 文件：在需要使用 Less 样式的组件中，使用 `import` 语句引入 Less 文件： ```javascript import './styles.less'; ``` 确保你的 Less 文件与组件文件位于同一目录，或者根据实际情况修改引入路径。 4. 编写 Less 样式：在引入的 Less 文件中，编写所需的样式规则。你可以使用 Less 提供的变量、嵌套规则和混合等功能来增强样式的可维护性和复用性。 5. 运行项目：运行你的 React 项目，Less 样式将会被编译并应用到对应的组件上。 这些是在 React 项目中使用 Less 的基本步骤。你可以根据项目需求进一步学习和探索 Less 的高级功能和用法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值