在 React 中使用带有 useRef 和 useEffect 的 typed init with TypeScript

Question

尝试在 React 应用中实现 ityped。下面显示的代码应该在 JSX 中工作；然而，这个 React 应用程序是用 Typescript (TSX) 编写的，这就是它因类型错误而失败的原因。

"Intro.tsx" 分量：

import React, { useEffect, useRef } from 'react';
import { init } from 'ityped';
import "./intro.scss";

export default function Intro() {

    const textRef = useRef(null);

    useEffect(() => {
        init(textRef.current, { 
            showCursor: false, 
            strings: ['Web developer', 'Logo designer'] 
        })
    }, []);
    return (
        <div className="intro" id="intro">
            <div className="left">
                <div className="imgContainer">
                    <img src="assets/man.png" alt="" />
                </div>
            </div>
            <div className="right">
                <div className="wrapper">
                    <h2>Hi there, I'm</h2>
                    <h1>Andreas Petersen</h1>
                    <h3>A <span ref={textRef}></span> </h3>
                </div>
                <a href="#portfolio">
                    <img src="assets/down.png" alt="" />
                </a>
            </div>
        </div>
    )
}

错误如下：

我的猜测是 const textRef = useRef(null); 需要以某种方式定义，以便来自 typeped 的 init() 可以正确理解它。

Answer 1

是的，您需要将 type 添加到 useRef，这样 Typescript 才能理解 ref 是针对 span 元素的。

试试这个：const textRef = useRef<HTMLSpanElement>(null);

Answer 2

你需要做两件事。首先，如您所料，您需要指定这是哪种类型的 ref：

const textRef = useRef<HTMLSpanElement>(null);

其次，即使是那种类型，就类型而言，textRef.current 仍然可以为 null。所以你要么需要在你的使用效果中添加代码来检查是否为空：

useEffect(() => {
  if (!textRef.current) {
    return;
  }
  init(textRef.current, { 
    showCursor: false, 
    strings: ['Web developer', 'Logo designer'] 
  })
}, []);

或者如果您确信在第一次渲染后它不可能为 null（即，您无条件地将它传递给将使用它的组件），您可以使用非-null assertion (!) 坚持打字稿，你知道它不是空的：

useEffect(() => {
  init(textRef.current!, { 
    showCursor: false, 
    strings: ['Web developer', 'Logo designer'] 
  })
}, []);

请注意，第二个选项意味着您告诉打字稿不要检查您的工作。如果你犯了一个错误，它实际上可以为空，打字稿不能告诉你，你可能会在运行时得到意想不到的行为。

在 React 中使用带有 useRef 和 useEffect 的 typed init with TypeScript

Use ityped init with useRef and useEffect in React with TypeScript

typescript

reactjs

tsx