Как установить тип машинописного текста для возвращаемого значения matchPath

Я пытаюсь использовать matchPath для извлечения параметра маршрута из родительского контейнера, как описано в https://stackoverflow.com/a/45492498/3574819

const topicMatch = matchPath(history.location.pathname, { path: '/:topic' });

Когда я console.log(topicMatch.params), у объекта установлен ключ topic, но если я попытаюсь получить доступ к topicMatch.params.topic, я получу следующую ошибку:

ошибка TS2339: свойство «тема» не существует для типа «{}».

const RouterApp = withRouter<{}>(
    class App extends React.Component<RouteComponentProps<{}>, AuthState> {
        render() {
            const { history } = this.props;    
            const topicMatch = matchPath(history.location.pathname, { path: '/:topic' });

            if (topicMatch) {
                console.log(topicMatch.params); // has topic key
                console.log(topicMatch.params.topic); // causes compile error
            }

            return (
                <div className="App">
                    <div className="App-header">
                        <img src={logo} className="App-logo" alt="logo"/>
                        <h2>Welcome to React</h2>
                    </div>
                </div>
            );
        }
    }
);

person FuzzyTree    schedule 13.11.2017    source источник


Ответы (1)


matchPath — это параметризованная функция, которая принимает универсальный тип <P> и возвращает совпадение с match<P>. Вы должны определить P; в противном случае я на самом деле не уверен, как TypeScript определяет возвращаемый тип.

matchPath<{topic: "string"}>(...)

Вы также можете создать свой собственный тип, если хотите, например.

interface RouteParams {
  topic: string;
}

а затем сделать matchPath<RouteParams>(...).

person Explosion Pills    schedule 13.11.2017