How to override non-generic types such as @types/History for useHitory()?

问题

My goal is to override 'History' type, so I can use pass eventKey props for (eventKey) => history.push(eventKey), I could not override History type from useHistory(), it said "Type History is not generic". The current solution I did is const history: any = useHistory() but I believe it defeat the purpose of types.

import { RouteConfigProps } from "app/routes/config";
import { RenderRoutes } from "app/routes/RenderRoutes";
import React from "react";
import { Nav, Navbar } from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";

const Home: React.FC<{routes: RouteConfigProps[]}> = ({ routes }) => {
  console.log("Home routes: ", routes)
  const history: History<> = useHistory();
  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand>Hi!</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" onSelect={(eventKey) => history.push(eventKey)>
            <Nav.Link eventKey="/home">Home</Nav.Link>
            <Nav.Link eventKey="/about">About</Nav.Link>
            <Nav.Link eventKey="/contact">Contact</Nav.Link>
            <Nav.Link eventKey="/motivational-letter">Motivational Letter</Nav.Link>
            <Nav.Link eventKey="/it-core-values">IT Core Values</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <RenderRoutes routes={routes} />
    </div>
  );
};

export default Home;

回答1:

As I explained in my comment, the useHistory() hook is generic. I think you're getting the error because there are multiple declarations for the interface History in multiple places, some generic and some not. It's assuming you mean the built-in browser History object instead of the router history. So it's better to apply the generic to the hook call than the returned object.

do this

const history = useHistory<MyHistoryType>(); // history has type History<MyHistoryType>

instead of this

const history: History<MyHistoryType> = useHistory(); // gives error History is not generic

But the typescript problem is what you are passing to history.push(). The passed argument must be a of type To which is either a string or a specific object PartialPath and does not depend on the generic of History.

The param which you pass as onSelect to the Nav component needs to be of type SelectCallback which is defined as:

type SelectCallback = (eventKey: string | null, e: React.SyntheticEvent<unknown>) => void

Do you see the mismatch yet? eventKey can be either string or null, but history.push() can only accept to accept a string and not null. So you need to make this conditional to filter out null before calling history.push(eventKey).

const onSelect = (eventKey: string | null) => {
    if (eventKey !== null) { 
        history.push(eventKey); 
    }
}

That will solve your typescript errors.

来源：https://stackoverflow.com/questions/64185143/how-to-override-non-generic-types-such-as-types-history-for-usehitory

标签

reactjs

typescript

react-router

react-router-dom