如何将匹配道具添加到打字稿中的接口

嗨，我的打字稿完全陌生，这让我有些困惑。我应该如何从我在自定义组件中作为props接收的react-router match定义props？

我的组件代码：

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;
    }
}
回答如下：

首先，看起来您有一个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
    }
  }
}

如何将匹配道具添加到打字稿中的接口

嗨，我的打字稿完全陌生，这让我有些困惑。我应该如何从我在自定义组件中作为props接收的react-router match定义props？

我的组件代码：

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;
    }
}
回答如下：

首先，看起来您有一个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
    }
  }
}