React组件中引用React Router DOM的match对象应使用什么TypeScript类型？

嘿，刚好我之前处理过这个问题！React Router DOM已经为我们提供了官方的TypeScript类型定义，完全不需要用any来“偷懒”啦，下面给你两种常用的解决方案：

方案1：使用RouteComponentProps（推荐） #

这个接口包含了React Router提供的match、location、history三个核心路由props，如果你组件里可能用到其中任意一个，直接让你的Props接口继承它就好。如果你的路由带参数（比如/product/:id），还可以通过泛型来定义参数的类型，获得更精准的类型提示：

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

// 定义路由参数的类型（如果有的话）
interface ProductRouteParams {
  id: string;
}

// 让自定义Props继承RouteComponentProps，泛型传入参数类型
interface Props extends RouteComponentProps<ProductRouteParams> {
  // 这里可以添加你的组件自定义的其他props
}

export class ProductContainer extends React.Component<Props> {
  render() {
    // 此时match.params.id会被自动识别为string类型，有完整的类型提示
    const { id } = this.props.match.params;
    return <div>当前产品ID：{id}</div>;
  }
}

方案2：单独引用Match类型 #

如果你确定只需要match对象，不想引入其他路由props，可以直接导入Match类型，同样支持泛型定义参数：

import { Match } from 'react-router-dom';
import React from 'react';

interface ProductRouteParams {
  id: string;
}

interface Props {
  match: Match<ProductRouteParams>;
  // 其他自定义props
}

export class ProductContainer extends React.Component<Props> {
  // 你的组件逻辑...
}

两种方案都能完美替代any，让你的代码类型更安全，也能享受TypeScript的类型提示带来的便利～

内容的提问来源于stack exchange，提问作者Nicolas Blanco