什么在 TypeScript 中声明 react-router 参数答案

【问题标题】：What to declare react-router argument as in TypeScript什么在 TypeScript 中声明 react-router 参数
【发布时间】：2018-04-18 12:20:15
【问题描述】：

我正在尝试使用 Typescript 以接受参数的方式设置 react-router。

在我的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 的回答，我添加了以下内容：

如您所见，这仍然存在问题。

【问题讨论】：

您是否从react-router 导入了match？也许这可以解释你的一些错误。您还需要从TestComp 声明类型。

标签： reactjs typescript react-router

【解决方案1】：

如果您使用的是 react-router v4，则从 react-router-dom 导入 RouteComponentProps 并使用类型 RouteComponentProps<RouteInfo> - 参数名称必须匹配

【讨论】：

【解决方案2】：

如果您使用的是 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 中，您将在 VS Code 和 IntelliJ 中获得完全的 IntelliSense

【讨论】：

【解决方案3】：

首先您需要从react-router-dom 导入match。

这是我从 create react app 生成的代码的副本：

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>
)

【讨论】：

【解决方案4】：

您应该安装一个包@types/react-router，它具有react-router 的类型声明。它包含一个接口match<P>，因此您可以使用它来描述您的属性类型。

【讨论】：

我已经有了 react-router 的类型。你能更清楚一点吗？如果我键入const ShowCrawl = ({ match: match<P> }) =>，那么它会在match 下加下划线，其中“'match' 仅指一种类型，但在这里用作值。”并在P 下划线“找不到名称'P'”。所以我显然仍然没有正确声明它。
你应该定义一个像这样的接口：interface Identifiable { public string id; } 并且改变你的匹配是这样的：({ match: match<Identifiable> })。显然，如果您的结构更改为更复杂的结构，您应该相应地更改该接口（以及接口名称；））
您也可以尝试将您的反应组件声明为const TestComp: React.SFC<TestCompProps> = (props) => {/* your code */}。其中interface TestCompProps = RouteComponentProps<YourProps>; 和interface YourProps = { /* Your custom props here/ */ };。这一定是最灵活的方式。
据我所知，您不能将变量类型指定为对象解构语法的一部分。您应该声明整个参数的类型，然后应用解构，这意味着以下构造应该起作用：const TestComp = ({ match }: RouteComponentProps<RouteInfo>) => {/* ... */}。 RouteComponentProps 是您在这种情况下应该使用的接口。

【解决方案5】：

要将道具类型指定为RouteComponentProps<T>，则可以使用match.params.your_prop访问

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

<Link to={'/show/1'}>CLICK HERE</Link>

// or, use string interpolation with variable as below
<Link to={`/show/${id}`}>CLICK HERE</Link>

import React from "react";
import { RouteComponentProps } from "react-router-dom";

type Props = {
    showId: string;
}

const TestComp= ({ match }: RouteComponentProps<Props>) => {
    console.log(match.params.showId);
}

【讨论】：

【解决方案6】：

有两种方法

const Container = ({ match }: RouteComponentProps<{ showId: string}>) => {
 const { showId} = match.params.showId;
}

或

const Container = () => {
  const { showId} = useParams<{ showId: string }>();
}

【讨论】：