How to add match props to interaface in typescript

Question

Hi i am totally new in typescript and this is a little bit confusing for me. How should i define props from react-router match, which i am receiving in my custom component as props?

My component code:

type IProps = {
    match:________, //WHAT SHOULD I PUT HERE?
}

type Istate = {
    loading: boolean,
    data: Object,
}


export class SubjectDashboard extends Component<Iprops, Istate> {



    componentDidMount() {
        this.getSubjectResults().then((r) => this.setState({loading: false, data: r}));
    }

    async getSubjectResults() {
        const roleId = this.context.role.id;
        const subjectId = this.props.match.params.id;
        const response = await fetch(RequestsUrlConstants.getStudentSubjectTreeWithResults(roleId, subjectId));
        const data = await response.json();
        if (response.status !== 200) {
            toast.error('Nepodarilo sa načítať dáta');
            return;
        }
        console.log(data);
        return data;
    }
}

Answer 1

First, it looks like you have a typo with Iprops and IProps

Next, you can either use interfaces:

interface IParams {
  id: string
}

interface IMatch {
  params: IParams
}

interface IProps {
  match: IMatch
}

Or types:

type IParams = {
  id: string
}

type IMatch = {
  params: IParams
}

type IProps = {
  match: IMatch
}

Or inline:

interface IProps {
  match: {
    params: {
      id: string
    }
  }
}