如何通过 withRouter 为注入的属性指定类型（typeScript）？

Posted 2023-02-21

【中文标题】如何通过 withRouter 为注入的属性指定类型（typeScript）？

【英文标题】：How does one specify type (typeScript) on injected properties through withRouter?

【发布时间】：2019-09-23 23:53:34

【问题描述】：

我对 TypeScript 很陌生，我正在尝试创建一个组件，该组件包含在“withRouter”HOC 中（通过 npm-package react-router-dom）来接收诸如匹配、历史和位置之类的道具。如何正确地做到这一点？我可以从@types/react-router-dom 导入现成的接口吗？以下是我的第一次尝试：

import classes from './SomeComponent.module.scss';
import  withRouter  from 'react-router-dom';

interface SomeComponentProps 

interface WithRouter 
  match: ObjectWithAnyKeys;
  location: ObjectWithAnyKeys;
  history: ObjectWithAnyKeys;


interface ObjectWithAnyKeys 
  [s: string]: string;


export const SomeComponent: React.FunctionComponent<SomeComponentProps & WithRouter> = (
  match,
  location,
  history,
) => 
  return (
    <div className=classes.ReadActivityContainer>
      'Some component that uses the router props match, location and history'
    </div>
  );
;

export default withRouter(SomeComponent as any);

【参考方案1】：

只需从 lib 中导入这些 prop 类型

import  RouteComponentProps, withRouter  from 'react-router-dom';

你必须说你的组件有这些道具

type ownProps = 
export const SomeComponent: React.FunctionComponent<ownProps & RouteComponentProps> = (props: ownProps & RouteComponentProps) => 
  const history = props.history;
  const match = props.match;
  // ect... all in props
  return (
    <div>
      some component that uses the router props match, location and history
    </div>
  );
;

export default withRouter(SomeComponent);

【讨论】：

出色的答案，谢谢。一个问题，一个人怎么知道这一点？我浏览了互联网，一无所获，关于将来如何解决这些问题的任何提示？另外 - JSX 使用什么类型？有时我有返回 JSX 的函数，以便能够处理功能组件中的复杂条件格式，但我不知道该使用什么

嗯，我很确定这个问题已经在某个地方得到了回答。您只需搜索更多。 HOC 会将一些道具传递给您的组件是标准的。去检查“withRouter”的定义你会看到有什么道具。您还可以看到这些道具是导出的接口，因此您可以导入它。我不明白你关于 jsx 的问题

关于 JSX - 假设我有一个带有 return 语句的函数：return (<div><SomeComponent /></div>) 该函数的返回类型是什么？

签入打字稿。它说它是 JSX.Element。来自反应库的接口。 JSX 是有很多接口的命名空间。如果您不知道应该使用什么类型，您可以随时在 typescript 中进行定义。