Visual Studio Code中React.forwardRef的TypeScript类型提示自动补全失效

• React.forwardRef直接匿名导出时，TypeScript无法将泛型中定义的props类型正确附着到导出的组件上，IDE识别不到组件的入参类型定义，自动补全失效
• 你在forwardRef泛型和内部render函数参数中重复定义props类型，可能触发类型推导冲突，干扰IDE的类型识别
• ref类型定义为unknown过于宽泛，也会影响整体类型推导的准确性

1. 提前提取组合后的props类型，避免多处重复写交叉类型

type FeedbackModalProps = BaseModalProps & FeedbackDetailsContentProps

2. 将forwardRef的返回值赋值给具名变量后再导出，补充组件displayName，同时删除内部render函数的重复类型标注，forwardRef泛型定义会自动推导内部props和ref的类型

// 请将第一个泛型参数替换为你的BaseModal组件对应的真实ref类型，比如HTMLDivElement或者BaseModal实例类型
const FeedbackModal = React.forwardRef<HTMLDivElement, FeedbackModalProps>((props, ref) => {
  return (
    <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
      <FeedbackDetailsContent {...props} />
    </BaseModal>
  );
});

FeedbackModal.displayName = 'FeedbackModal'

export default FeedbackModal

3. 如果上述操作后仍未恢复补全，可以手动显式标注组件类型：

import type { ForwardRefExoticComponent, RefAttributes } from 'react'

const FeedbackModal: ForwardRefExoticComponent<FeedbackModalProps & RefAttributes<HTMLDivElement>> = React.forwardRef((props, ref) => {
  return (
    <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
      <FeedbackDetailsContent {...props} />
    </BaseModal>
  );
})

4. 确认tsconfig.json中开启了strict: true配置，TypeScript严格模式下类型推导会更加准确。

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