Definitelytyped: @types/[email protected] breaks Router

Created on 4 Jun 2017 · 4Comments · Source: DefinitelyTyped/DefinitelyTyped

I have a project using typescript with react, react-redux, etc. It works fine with @types/[email protected], but breaks with 4.4.41.

As an example, with 4.4.41, the following:

<Route path="/admin/accounts/new" component={NewAccount} />

gives the following:

ERROR in [at-loader] ./src/components/admin/Accounts.tsx:31:18 
    TS2322: Type '{ path: "/admin/accounts/new"; component: ComponentClass<FormProps>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.

Also, components with path, initialValues, etc. custom properties also fail. These all pass fine with 4.4.40. Is this by design? If so, shouldn't the breaking change be a major release?

The full list of dependencies are:

  "devDependencies": {
    "awesome-typescript-loader": "^3.1.3",
    "jsx-loader": "^0.13.2",
    "source-map-loader": "^0.2.1",
    "typescript": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "@types/history": "^4.5.1",
    "@types/lodash": "^4.14.65",
    "@types/react": "^15.0.25",
    "@types/react-dom": "^15.5.0",
    "@types/react-hot-loader": "^3.0.1",
    "@types/react-jsonschema-form": "^0.43.0",
    "@types/react-redux": "4.4.40",
    "@types/react-router": "^4.0.9",
    "@types/react-router-dom": "^4.0.4",
    "@types/react-router-redux": "^5.0.1",
    "@types/redux": "^3.6.31",
    "@types/redux-thunk": "^2.1.32",
    "@types/webpack-env": "^1.13.0",
    "bootstrap": "^3.3.7",
    "history": "^4.6.1",
    "immutable": "^3.8.1",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-jsonschema-form": "^0.48.2",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "typed-immutable-record": "0.0.6",
    "webpack-env": "^0.8.0"
  }

Source

ashic

👍9

Most helpful comment

Issue persists with 4.4.42.

ashic on 13 Jun 2017

👍4

All 4 comments

With 4.4.41 we also experience the same problem with explicit anys.

export class EditorCanvas extends React.Component<any,any> {
 // ...
}

export default connect<any,any,any>(mapStateToProps, mapDispatchToProps)(EditorCanvas)

As of 4.4.40, this component could receive any custom prop assigned to it, as expected. Now, it generates a compiler error along with other components defined similarly.

 src/js/components/TableManager.tsx(82,25): Error TS2339: Property 'embedOptions' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & { children?: Reac...'.