Type A is not assignable to type B in typescript with antdesign

Question

Hi guys I was writing this code in typescript with using ant design and I got this issue (TS2322). I wanted to use 'Input' from 'Ant Design' and set the first value as null. After that I was gonna put it in the Input it occurs some errors. Does anyone know how to solve this issue? Thank you for your help in advance! *FYI: my antd version is 4.21.0 and typescript is 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>

}

Add: oops I forgot to put what the error message says!

Panda · Accepted Answer · 2022-07-29T09:58:03.123

4

Typescript message explains why your emailRef type doesn't match Input ref required type:

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

So my clue is that you should use InputRef as generic type for emailRef:

const emailRef = useRef<InputRef>();

You can find similar example in antd docs in 'Focus with additional option' code example: 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);
....

Try:


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

edited Jul 29 '22 at 09:58

answered Jul 28 '22 at 11:24

Panda

108
5

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Jul 29 '22 at 02:12

score 0 · Answer 2 · answered Aug 28 '23 at 22:14

0

try: (antd ver5~~)


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

answered Aug 28 '23 at 22:14

JINHYUN

1

Plus ```import type { InputRef } from 'antd';``` – JINHYUN Aug 28 '23 at 22:14
Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Aug 28 '23 at 22:56

Type A is not assignable to type B in typescript with antdesign

2 Answers2