JS转TS时useRef绑定span报RefObject类型不匹配如何解决？

错误原因 #

你声明的ref类型和绑定的DOM元素类型不匹配：<span>标签的ref需要关联HTMLSpanElement类型的DOM实例，但是你给useRef指定的泛型是string，TS检测到类型冲突就抛出了该错误。

修复方案 #

只需要修正useRef的泛型声明即可，其余逻辑无需改动：

• 将useRef的泛型从string改为HTMLSpanElement | null，匹配span DOM实例的类型，同时兼容初始值null的类型
• useEffect中使用textRef.current!的非空断言是安全的，因为effect在组件挂载完成后才执行，此时ref已经成功绑定到span元素上，current一定有值

修复后完整代码 #

const textRef = useRef<HTMLSpanElement | null>(null);       //ityped function

useEffect(() => {               //render ityped function
    init(textRef.current!, {
    showCursor: true,
    backDelay: 1500,
    backSpeed:60,
    strings: ["React Assignment by Phuc Le"],
    });
}, []);
return (     
    <span className="ityped" ref={textRef}></span>
)

内容的提问来源于stack exchange，提问作者phuc le