antd - Typ A kan inte tilldelas typ B i TypeScript med antdesign

Hej allihopa, jag skrev denna kod i TypeScript med att använda Ant Design och fick detta problem (TS2322). Jag ville använda 'Input' från 'Ant Design' och sätta det första värdet som null. Efter det skulle jag lägga det i Input, men det uppstår vissa fel. Vet någon hur man löser detta problem? Tack på förhand för er hjälp! *FYI: min antd-version är 4.21.0 och TypeScript är 4.7.2

import { Button, Col, Input, Row } from "antd";
import { useRef } from 'react';
import styles from './Signin.module.css';

export default function Signin() {
const emailRef = useRef<typeof Input>(null);
const passwordRef = useRef<typeof Input>(null);

  return <Row align="middle" className={styles.signin_row}>
    <Col span={24}>
      <Row className={styles.signin_contents}>
        <Col span={12}>
          <img src="/bg_signin.png" alt="Signin" className={styles.signin_bg}/>
        </Col>
        <Col span={12}>
          <div className={styles.signin_title}>My Books</div>
          <div className={styles.signin_subtitle}>Please Note Your Opinion</div>
          <div className={styles.signin_underline} />
          <div className={styles.email_title}>
            Email
            <span className={styles.required}> *</span>
          </div>
          <div className={styles.input_area}>
            <Input 
            placeholder="Email"
            autoComplete="email"
            name="email" className={styles.input}
            ref ={emailRef}/>
          </div>
          <div className={styles.password_title}>
            Password
            <span className={styles.required}> *</span>
          </div>
          <div className={styles.input_area}>
            <Input 
            type="password"
            autoComplete="current-password"
            name="password"
            className={styles.input}
            ref={passwordRef}/>
          </div>
          <div className={styles.button_area}>
            <Button size="large" className={styles.button}>Sign In</Button>
          </div>
        </Col>
      </Row>
    </Col>
  </Row>

}

Lägg till: oj, jag glömde skriva vad felmeddelandet säger!

Svar #1

Typescript-meddelande förklarar varför din emailRef-typ inte matchar den typ som krävs för Input-ref:

Type 'RefObject<CompoundedComponent>' is not assignable to type 'Ref<InputRef> | undefined

Så mitt tips är att du bör använda InputRef som generisk typ för emailRef:

const emailRef = useRef<InputRef>();

Du kan hitta ett liknande exempel i antd-dokumentationen i kodexemplet 'Focus with additional option': https://ant.design/components/input/#Input.TextArea

import type { InputRef } from 'antd';

import { Button, Input, Space, Switch } from 'antd';
import React, { useRef, useState } from 'react';

const App: React.FC = () => {
  const inputRef = useRef<InputRef>(null);
  const [input, setInput] = useState(true);
....

Försök :

const emailRef = useRef<InputRef | null>(null);

Svar #2

försök: (antd ver5~~)

const emailRef = useRef<InputRef | null>(null);