React + Typescript проблема с кастомным компонентом, как решить?

Question

[MaZaAa]

Версии:

"@types/react": "^16.8.4",
"@types/react-dom": "^16.8.2",
"typescript": "^3.3.3",

Код компонента Input :

import * as React from 'react';
import CSSModules from 'react-css-modules';


interface ComponentProps {
    innerRef?: React.RefObject<HTMLInputElement>;
    onKeyPress?: (e: any) => void;
    onKeyDown?: (e: any) => void;
    onFocus?: (e: any) => void;
}


@CSSModules(require('./styles.scss'), { allowMultiple: true })
class Input extends React.Component<ComponentProps> {
    render() {
        let {innerRef, ...props } = this.props;

        return (
            <input {...props} styleName="input" ref={innerRef} />
        );
    }
}

export default React.forwardRef((props, ref?: React.RefObject<HTMLInputElement>) => <Input innerRef={ref} {...props}/>);

Кусок кода где этот компонент используется:

<Input 
    ref={this.inputRef}
    onKeyPress={(e) => { e.preventDefault(); }}
    onKeyDown={(e) => { e.preventDefault(); }}
    onFocus={this.onInputFocus.bind(this)}
    placeholder={placeholder}
/>

И получаю такую ошибку:

Type '{ ref: RefObject<HTMLInputElement>; onKeyPress: (e: any) => void; onKeyDown: (e: any) => void; onFocus: any; placeholder: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<HTMLInputElement>'.
  Property 'onKeyPress' does not exist on type 'IntrinsicAttributes & RefAttributes<HTMLInputElement>'

Проблема не только конкретно в этом компоненте, а в любом в этом роде.
Что делаю не так? Что надо исправить?

Answer 1

[Игорь]

Попробуйте так

export default React.forwardRef<
  HTMLInputElement,
  ComponentProps
>((props, ref?: React.RefObject<HTMLInputElement>) => <Input innerRef={ref} {...props}/>);