Definitelytyped: [@types/reach__router] HistorySource for createHistory is incompatible with window

[sorahn]

Trying to use the createHistory function as described here and I get the following error.

Argument of type 'Window' is not assignable to parameter of type 'HistorySource'.
  Types of property 'location' are incompatible.
    Type 'Location' is not assignable to type 'WindowLocation'.
      Property 'state' is missing in type 'Location' but required in type 'Location<any>'.ts(2345)
index.d.ts(30, 5): 'state' is declared here.

the 'state' is declared here message links to here.

I'm not sure what's wrong, or how to work around this with out just killing the whole types declaration for @reach/router history.

I'm very new to typescript and I barely know enough to get my app working, let alone submit a PR to fix the issue. Sorry :(

@kingdaro

[BrunoQuaresma]

I have the same issue.

[sorahn]

@BrunoQuaresma my solution was to just add this line to my react-app-env.d.ts file

// remove after github bug fixed
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36198
declare module "history";

[BrunoQuaresma]

thank you @sorahn

[kingdaro]

@sorahn You might not know now, but it's a good time to learn 🙂

Here, the function needs to be updated to also accept Window:

export function createHistory(source: HistorySource | Window): History;

Then, add a test to this file to make sure it works going forward.

// listen to the browser history
const windowHistory = createHistory(window)

// using a memory source
const source = createMemorySource("/starting/url")
const memoryHistory = createHistory(source)

[sorahn]

@kingdaro Thank you for the lesson! I wasn't sure if the fix would be changing the param type, or updating HistorySource interface.

I will try and make a pull request for this tomorrow.

[kingdaro]

Sure thing 👍 I think either would work though

[sorahn]

@kingdaro I haven't made this a PR yet, becasue I'm also unsure how the testing works. I added 2 more LocationProviders to the render function using the windowHistory and the memoryHistory.

Is the idea just to make sure that it renders as written? I don't see any code that looks like it would click the buttons provided.

I ran npm test and it picked up the changes and ran the test and everything passed.

diff: https://github.com/DefinitelyTyped/DefinitelyTyped/compare/master...sorahn:window-history