Что объявить аргумент response-router, как в TypeScript

Я пытаюсь настроить реагирующий маршрутизатор, используя Typescript, который принимает параметр.

В моем элементе render меня есть

<Route path="/show/:id" component={TestComp} />

И я определяю TestComp как

const TestComp = ({ match }) => (
    <div>
        <h2>Showing specified ID: {match.params.id}</h2>
    </div>
)

Однако VS Code подчеркивает match параметра (в объявлении TestComp) и говорит мне,

Элемент связывания "match" неявно имеет тип "any".

и это не в состоянии скомпилировать.

Может кто-нибудь сказать мне, какой тип match должен быть объявлен? Я пробовал RouteProps но это тоже не работает. Глядя в index.d.ts, я думаю, что он определен как match<P> но я не уверен, как объявить параметр как универсальный тип.

ОБНОВИТЬ
Основываясь на комментариях к ответу @TarasPolovyi, я добавил следующее:

Как видите, с этим все еще есть проблемы.

Ответ 1

Если вы используете RouteComponentProps react-router v4, тогда импортируйте RouteComponentProps из RouteComponentProps react-router-dom и используйте тип RouteComponentProps<RouteInfo> - имя аргумента должно быть совпадением

Ответ 2

Во-первых, вам нужно импортировать match из react-router-dom.

Это копия моего кода, сгенерированного из приложения create response:

import {
    BrowserRouter as Router,
    Route,
    Link,
    match
} from 'react-router-dom';

Вам нужен такой интерфейс:

interface Identifiable {id: string; }

match это то, что вам нужно. Как это:

const TestComp = (mathedRoute: match<Identifiable>) => (
    <div>
        <h2>Showing specified ID: {mathedRoute.params.id}</h2>
    </div>
)

Ответ 3

Вы должны установить пакет @types/react-router, у которого есть объявление типов для react-router. Он содержит match<P> интерфейса match<P>, поэтому вы можете описать свой тип свойства, используя его.

Ответ 4

Если вы используете Typescript и React Router V 4.0, синтаксис другой. Вы объявляете свой маршрут следующим образом:

<Route path="/home/:topic?" render={() => {
   return this.renderView(<ContentHolder />);
}} />

Тогда Компонент объявляется следующим образом:

interface RouteInfo {
    topic: string;
}

interface ComponentProps extends RouteComponentProps<RouteInfo> {
}

class ContentHolder extends Component<ComponentProps> {

    render() {
        return (
            <Content>
                <h1 className="page-title">{this.props.match.params.topic}</h1>
            </Content>
        );
    };
};

export default withRouter(ContentHolder);

Затем внутри вашего this.props.match.params вы получаете полностью IntelliSense как в VS Code, так и в IntelliJ.