react在ts中提示ref问题
发表于|更新于
|浏览量:
不要太在乎一些人,越在乎,越卑微。——周国平
首先按照官方文档的demo写好代码,却报错如下:

安装插件Error Lens后:

如何解决?
前往Text的ref源码,可以看到是需要一个叫LegacyRef的类型

我们进LegacyRef,看到其就是Ref或string的类型

因此这里我们定义为Ref类型即可

这里出现了新的问题,不能将MutableRefObject<Text | null |undefined>分配给Ref<Text>
我们进入useRef源码,看到其包含几个重载

分别查看MuteableRefObject和RefObject

可以看到RefObject是Ref中容许的其中一种类型

所以应该使用上面一种重载

在原有代码React.useRef()中传入null
报错解决

同理,trRef一样

注意此处Ref<TextRef>内的泛型使用的是konva/lib/shapes/Text包下的Text,改名为TextRef
除了在定义变量左侧申明类型,在方法右侧也可以申明泛型,让编辑器自动推测

相关推荐
2022-09-29
relation-graph
青年人如果有青年人的精神,这精神就是乐观——茅盾 这是一个Vue关系图谱组件,可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱,可提供多种图谱布局,包括树状布局、中心布局、力学布局自动布局等。 git仓库:https://github.com/seeksdream/relation-graph 文档地址:http://relation-graph.com/#/docs/start 在线体验:http://relation-graph.com/#/demo/layout-center 甚至包含在线配置工具 十分强大
2024-11-09
typescript-exercises(十四)
人心就是立国的大根本。——孙中山 问题: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194...
2020-08-19
js使用for in取动态key参数
It’s a nice day for coding,isn’t it?Ha ha! 今天遇到一种服务端响应的参数,key是动态的 就像这样 我们一般静态key取值就是直接 1data.data.id.username 但这种id是动态的 我们就只能用for in的方式取值了 12345678var data = { "msg": "查询成功!", "code": 200, "data": { "2f793b1baf4b441c99a12d22af6678aa": { "username": "ruben2", "password": null, "userInfo": null, "genderEnum": null }, "59fa61fe88b64df58568a7046f17ab38": { &qu...
2024-07-26
使用Console Importer安装lodash并使用
健康和才智是人生两大幸事。——米南德 我今天在逛lodash官方文档,用Console Importer仅需安装时 除了我们一般的使用方式也就是$i("lodash") 12345678$i("lodash")importer.js:2 [$i]: Searching for lodash, please be patient...undefinedimporter.js:2 [$i]: lodash not found, import lodash.js instead.importer.js:2 [$i]: lodash.js is loading, please be patient...importer.js:2 [$i]: lodash.js(https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js) is loaded._.camelCase('Foo Bar');'fooBar' 还可以直接Vue ...
2025-05-31
remix
精诚所加,金石为开。——《后汉书·光武十王列传》 https://remix.run/ https://github.com/remix-run/remix Remix:现代化的全栈 Web 框架随着 Web 开发技术的不断演进,开发者对框架的要求不仅局限于前端性能的优化,还包括后端数据处理、SEO 支持以及高效的开发体验。为了解决这些需求,Remix 应运而生。 Remix 是一个现代化的全栈 Web 框架,专注于提供最佳的开发者体验和用户体验。它以渐进增强的理念为核心,帮助开发者构建快速、可交互性强、并且易于扩展的 Web 应用。 什么是 Remix?Remix 是一个开源的全栈 Web 框架,致力于优化应用的性能和开发体验。它允许开发者同时处理客户端和服务端逻辑,使得应用的交互性和性能达到最佳状态。 Remix 的核心优势包括: 服务端渲染(SSR):通过服务端渲染提高初次加载速度和 SEO 表现。 渐进增强:支持现代浏览器功能,同时为低性能设备提供良好体验。 路由驱动开发:基于文件系统的路由,让开发者专注于功能实现。 数据加载优化:支持服务端数据加载和缓存机制,减...
2022-01-03
在vue中使用ts
诚实的生活方式其实是按照自己身体的意愿行事,饿的时候才吃饭,爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》 官方文档:https://www.typescriptlang.org/docs/handbook/intro.html 首先找到中文文档:https://www.tslang.cn/samples/index.html 寻找到vue.js 跳转过去后就是教程,我们跟着教程一步一步来 首先新建一个空项目 然后新建src目录和components目录 1234typescript-vue-tutorial/├─ dist/└─ src/ └─ components/ 输入命令下载依赖 1D:\file\projects\vue-ts-demo>cnpm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler 很快就下载完毕 然后初始化ts环境 1tsc --init 可以看到多出了ts配置文...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog