Typescript 接口用於 Annoymous Function 傳遞到 React 組件

Question

我正在學習將 Typescript 與 React 功能組件（Bootstrap 模態組件）一起使用，並且對在使用匿名 ZC1C425268E68385D14AB5074C17A9 時應如何為組件正確定義 Typescript 接口感到困惑。

在下面的示例中， TheModal組件在 boolean show和匿名handleClose處理關閉中傳遞。

export function Foo(): JSX.Element {
    const [ showModal, setShowModal ] = useState(false);

    return (
        <MyContainer>
            <TheModal show={showModal} handleClose={ () => setShowModal(!showModal) } />
        </MyContainer>
    )
}

下面是TheModal組件和 Typescript 接口定義IModal 。 盡管代碼運行，但我認為any不應該用於handleClose 。

interface IModal {
    show: boolean;
    handleClose: any;  // <======== I believe we should use something better than `any`
}

function TheModal({show, handleClose}: IModal): JSX.Element {
    return (
        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Hello World</Modal.Title>
            </Modal.Header>
            <Modal.Body>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>Cancel</Button>
            </Modal.Footer>
        </Modal>
    )
}

在IModal中定義handleClose類型的正確方法是什么？

Answer 1

我相信打字處理程序的最佳方式是使用 React 內置類型：

import React from 'react';

interface IModal {
    show: boolean;
    handleClose: React.MouseEventHandler<HTMLButtonElement>;
}