如何将匹配道具添加到 typescript 中的界面

Question

嗨，我是 typescript 的新手，这让我有点困惑。 我应该如何定义来自 react-router 匹配的道具，我在我的自定义组件中接收它作为道具？

我的组件代码：

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

首先，您的Iprops和IProps似乎有错字

接下来，您可以使用接口：

interface IParams {
  id: string
}

interface IMatch {
  params: IParams
}

interface IProps {
  match: IMatch
}

或类型：

type IParams = {
  id: string
}

type IMatch = {
  params: IParams
}

type IProps = {
  match: IMatch
}

或内联：

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