如何为ForwardRefExoticComponent组件添加静态属性类型且无需类型断言

解决方案 #

你可以通过以下两种方式实现，全程不需要额外类型断言：

方案1：提前声明交叉类型

直接在定义Modal组件变量时，就把组件本身类型和静态属性类型做交叉：

import React, { ReactNode, RefAttributes } from 'react';

interface ModalProps {
    title: ReactNode;
}
interface ModalStaticProps {
    show(): void;
    hide(): void;
}
// 变量类型直接声明为组件类型 + 静态属性类型的交叉类型
const Modal: React.ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>> & ModalStaticProps = React.forwardRef<
    HTMLDivElement,
    ModalProps
>(({ title }, ref) => {
    return <div ref={ref}>{title}</div>;
});

// 直接赋值静态方法不会报类型错误
Modal.show = () => { /* 实现逻辑 */ };
Modal.hide = () => { /* 实现逻辑 */ };

function Consumer() {
    return <div onClick={() => Modal.show()} />;
}

方案2：使用Object.assign自动推导类型（更推荐）

Object.assign的返回值会自动推导为两个入参的交叉类型，不需要手动声明类型，代码更简洁：

import React, { ReactNode } from 'react';

interface ModalProps {
    title: ReactNode;
}

// 先定义基础的forwardRef组件
const BaseModal = React.forwardRef<HTMLDivElement, ModalProps>(({ title }, ref) => {
    return <div ref={ref}>{title}</div>;
});

// 用Object.assign合并组件和静态方法，类型自动推导
export const Modal = Object.assign(BaseModal, {
    show() {
        // 实现逻辑
    },
    hide() {
        // 实现逻辑
    }
});

function Consumer() {
    return <div onClick={() => Modal.show()} />;
}

两种方案都可以让TS正确识别Modal上的show、hide静态方法，以及组件本身的props、ref类型。

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