Question

我正在尝试使用带有以下代码的Typescript在React Router中实现Scroll Restoration。

import { Component } from 'react';

import { withRouter } from "react-router-dom";

export interface IProps {
  prevProps?: any;
  location: object;
  pathname?: any;
}

class ScrollToTop extends Component<IProps, object> {

  componentDidUpdate(prevProps?: any) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

  render() {

    return this.props.children;

  }

}

export default withRouter(ScrollToTop);

但是，当我添加位置和路径名的类型时，我继续收到以下TS错误。

(14,29): Property 'pathname' does not exist on type 'object'.

为什么我的代码不正确？

Answer 1

如另一个答案中所述，必须从withRouter导入react-router。

但是要回答有关打字稿错误的问题，这是因为location已被定义为打字稿的object而未在其上指定属性。这就是为什么当您尝试访问其上的pathname时出现错误的原因。

幸运的是，您不必写出位置道具的所有属性。相反，您可以使用以下命令安装react-router类型：

npm install --save @types/react-router @types/react-router-dom

在创建继承这些道具（比赛，位置，历史）的组件时，只需扩展RouteComponentProps：

import { RouteComponentProps } from "react-router";

interface IProps extends RouteComponentProps {
  // other props
}

如何解决Typescript中“类型”“对象”上不存在的“属性”字符串问题

1 个答案: