【TS】如何解决React中的ForwardRef函数类型中有[index:string]:any，使用时丧失类型提示的问题？

Question

问题描述

问题复现链接
有一个组件需要向父级暴露方法，所以采用forwardRef的方式。按如下方式定义,在组件调用处输入na,有name的相关类型提示

import React from 'react';

interface Props {
    name?: string;
    age?: number;
}

const DemoForwardRef = React.forwardRef((props: Props) => {
    const { name, age } = props;
    return (
        <p>
            我是{name}，年龄{age}
        </p>
    );
})

const Test2 = () => {
    // 输入na 有name的提示
    return <DemoForwardRef />
}

我同时期望该组件能够接受其他任何参数，故给类型变成

interface Props {
    name?: string;
    age?: number;
    [index: string]: any
}

给类型增加了[index:string]:any以后，name和age的类型提示就不生效了。

import React from 'react';

// 期望除了name和age，还可以接受其他任何参数
interface Props {
    name?: string;
    age?: number;
    [index: string]: any
}

const DemoForwardRef = React.forwardRef((props: Props) => {
    const { name, age } = props;
    return (
        <p>
            我是{name}，年龄{age}
        </p>
    );
})

const Test2 = () => {
    // 输入na 没有name的提示
    return <DemoForwardRef  />
}

同样的类型对React.FC是生效的

我怀疑这是React的一个Bug

附上@types/react中对于React.forwardRef的定义

请教问题

1、如何能够解决这个问题？
2、平时有在使用ProComponents中的ProTable，有注意到改组件库向外暴露方法的方式未使用forwardRef来使用ref，而是自定义了一个actionRef的属性，不知是否是因为forwardRef的这个坑？

补充

已向官方提了issues

Answer 1

你写法有问题
https://beta.reactjs.org/blog...
参考下文档的写法, ref 放在第二个参数