在带有 typescript 的函数组件中使用 useImperativeHandle ，会提示一些错误；

Question

类型 '{ focus(): void; }' 缺少类型“HTMLDivElement”中的以下属性：align、addEventListener、removeEventListener、accessKey 和 234 more.ts(2740) index.d.ts(1041, 79)：预期类型来自此的返回类型签名。

这是组件代码：

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = HTMLDivElement | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current.focus();
      }
    }));
    return (
      <div ref={ref}>
        {children}
        <input type="text" ref={inputRef} />
      </div>
    );
  }
);

export default Swiper;

完整代码在codesandbox中；

https://codesandbox.io/s/useimperativehandlecomponenterror-lowon

Answer 1

您混淆了引用的类型定义：

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = {
  focus: () => void
} | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current?.focus();
      }
    }));
    return (
      <div>
        {children}
        <input type="text" ref={inputRef} />
      </div>
    );
  }
);

export default Swiper;

您公开的类型应该描述您的命令句柄。