react在ts中提示ref问题

首先按照官方文档的demo写好代码，却报错如下：

image-20220616130732782

安装插件Error Lens后：

image-20220616130416141

如何解决？

前往Text的ref源码，可以看到是需要一个叫LegacyRef的类型

image-20220616131033822

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

image-20220616131134570

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

image-20220616131228231

这里出现了新的问题，不能将MutableRefObject<Text | null |undefined>分配给Ref<Text>

我们进入useRef源码，看到其包含几个重载

image-20220616131355690

分别查看MuteableRefObject和RefObject

image-20220616131558832

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

image-20220616131733093

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

image-20220616131807973

在原有代码React.useRef()中传入null

报错解决

image-20220616131847569

同理，trRef一样

image-20220616131948951

注意此处Ref<TextRef>内的泛型使用的是konva/lib/shapes/Text包下的Text，改名为TextRef

除了在定义变量左侧申明类型，在方法右侧也可以申明泛型，让编辑器自动推测

image-20220616132252642