Creating and using an interface for a history-object in React Typescript?

user_13189436 0
Viewed 287

I have a component that takes in a history object as props. For now it is just typed as any, but I would like to type it to the appropriate object. How do i set up and use an interface for this?

Object: Object representation

My code:

import React, { useState } from 'react';
import { Row, Col } from 'antd';
import Search from 'antd/lib/input/Search';

const MyPatients = (props: any) => {
    console.log(props);
    const handleSearch = (value: any) => {
        console.log(value);
        setPatientID(value);
    };

    const [patientID, setPatientID] = useState();
    return (
        <>
            <div style={{ marginTop: 90 }}></div>
            <Row gutter={[60, 40]} justify={'center'}>
                <Col span={300}>
                    <p>Søk med personnummer for å finne en pasient.</p>
                    <Search
                        style={{ width: 400 }}
                        placeholder="Søk etter en pasient!"
                        onSearch={handleSearch}
                    />
                </Col>
            </Row>
            {patientID &&
                props.history.push({ pathname: 'Pasient', state: patientID })}
        </>
    );
};
export default MyPatients;
typescript reactjs javascript
1 Answers

Assuming you are using this history, you can install corresponding types by running npm install --save @types/historyin your project.

Once that is done, you can use the History type as such:

...
import { History } from 'history';

interface Props {
    history: History;
}

const MyPatients = (props: Props) => {...}
user_74841340
Related