Definitelytyped: react-router HistoryOptions is incompatible with history HistoryOptions

[narthollis]

• [x] I tried using the @types/react-rotuer-3.0.2 package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @LKay @sergey-buturlakin @mhegazy
  
  

The HistoryOptions Interface in react-redux is missing options available in the upstream history package.

Most notably for my needs, is basename: string.

The code that I am attempting to execute is:

    const browserHistory = useRouterHistory(createHistory)({ basename: APP_BASE_URL });

[narthollis]

Additionally, The Location definition used in react-router@3 definitions is incompatible with the history@2 definitions, and the history@4 has a different export structure to history@3 which is what react-router@3 depends on.

src/index.tsx(33,45): error TS2345: Argument of type '(options?: HistoryOptions | undefined) => History' is not assignable to parameter of type 'CreateHistory<History>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'HistoryOptions | undefined' is not assignable to type 'HistoryOptions | undefined'. Two different types with this name exist, but they are unrelated.
      Type 'HistoryOptions' is not assignable to type 'HistoryOptions | undefined'.
        Type 'HistoryOptions' is not assignable to type 'HistoryOptions'. Two different types with this name exist, but they are unrelated.
          Types of property 'getCurrentLocation' are incompatible.
            Type '(() => Location) | undefined' is not assignable to type '(() => Location) | undefined'. Two different types with this name exist, but they are unrelated.
              Type '() => Location' is not assignable to type '(() => Location) | undefined'.
                Type '() => Location' is not assignable to type '() => Location'. Two different types with this name exist, but they are unrelated.
                  Type 'Location' is not assignable to type 'Location'. Two different types with this name exist, but they are unrelated.
                    Property 'query' is missing in type 'Location'.

[narthollis]

Additionally again, even when using the definitions for history@4 I get following type conflict.

src/index.tsx(33,45): error TS2345: Argument of type '(options?: BrowserHistoryBuildOptions | undefined) => History' is not assignable to parameter of type 'CreateHistory<History>'.
  Type 'History' is not assignable to type 'History'. Two different types with this name exist, but they are unrelated.
    Property 'listenBefore' is missing in type 'History'.

[Dante-101]

+1. Broke our build too.

[LKay]

Works for two of mine project with history v4. History had only v2 and v4 when I updated the typings. I can update the definitions to use recently added history v3.

[Dante-101]

@LKay It will work if you are not using the mentioned interfaces/fields.

I realized two things while going through the code and definitions:

1. history docs don't mention Location.query. They expect you to use useQueries.
   See Location v3.x docs

This is not in sync with what react-router tutorial mentions.. I have opened an issue to update the react-router docs.

1. I believe HistoryOptions used for type CreateHistory<T> in react-router should be in sync with history interface. For instance, BrowserHistoryBuildOptions in history is defined as

export interface BrowserHistoryBuildOptions {
  basename?: string;
  forceRefresh?: boolean;
  getUserConfirmation?: typeof getConfirmation;
  keyLength?: number;
}

and HashHistoryBuildOptions is

export interface HashHistoryBuildOptions {
  basename?: string;
  hashType?: HashType;
  getUserConfirmation?: typeof getConfirmation;
}

Shouldn't HistoryOptions have basename as an optional field? It goes against the history doc in react-router tutorial.

[Dante-101]

I was mistaken for point 1. It is a Typescript definition issue.

useRouterHistory enhances history with useQueries which ends up introducing query field in the Location type. CreateHistory<T> cannot return just object of type History because react-router enhances the LocationDescriptor of the returned History.

It also uses useBasename enhancer which reads the value of basename from the options. See this.

[LKay]

@Dante-101 @narthollis Just pushed the changes and raised a new PR. Check if that resolves issues for you.

[narthollis]

Very minor problem now, the result of useRouterHistory is not assignable to the history property of Router. :p

Thanks very much for your work on this.

src/index.tsx(51,42): error TS2322: Type 'History & HistoryUnsubscribe' is not assignable to type 'History | undefined'.
  Type 'History & HistoryUnsubscribe' is not assignable to type 'History'.
src/index.tsx(51,42): error TS2322: Type 'History & HistoryUnsubscribe' is not assignable to type 'History | undefined'.
  Type 'History & HistoryUnsubscribe' is not assignable to type 'History'.
    Types of property 'createLocation' are incompatible.
      Type '{ (path?: string | LocationDescriptorObject | undefined, action?: string | undefined, key?: strin...' is not assignable to type '(path?: string | LocationDescriptorObject | undefined, action?: "POP" | "PUSH" | "REPLACE" | unde...'.
        Type 'Location' is not assignable to type 'Location'. Two different types with this name exist, but they are unrelated.
          Types of property 'action' are incompatible.
            Type 'string' is not assignable to type 'Action'.

[LKay]

@narthollis I have checked that and even added the test for this, which passes. The type HistoryUnsubscribe comes from react-router-redux? It is not part of react-router definitions but I traced it down.

This error comes from nature of DefinitelyTyped... I had to add some mappings to history@3 explicitly to other depending definitions. Should be fixed now.

[narthollis]

Thanks for looking into this, I have run out of time again today to take a look at it, but will leave this window on top to remind me first thing tomorrow.

[narthollis]

Your PR is working well for me now. Thankyou very much.

[mxl]

This can be closed.

[glcheetham]

In my project I solved the error

src/index.tsx(33,45): error TS2345: Argument of type '(options?: BrowserHistoryBuildOptions | undefined) => History' is not assignable to parameter of type 'CreateHistory<History>'.
  Type 'History' is not assignable to type 'History'. Two different types with this name exist, but they are unrelated.
    Property 'listenBefore' is missing in type 'History'.

By using the following versions of the packages

$ cat package.json | grep react-router
    "react-router-redux": "^4.0.8",
    "@types/react-router": "^3.0.12",
    "@types/react-router-redux": "^4.0.48",
    "react-router": "^3.0.2",

[jenyckee]

issue still persists with

"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"@types/react-router-dom": "^4.2.0",
"@types/react-router-redux": "^4.0.51"