Javascriptservices: React Redux Template does not work with typescript@next

Created on 26 Jan 2018  路  4Comments  路  Source: aspnet/JavaScriptServices

React Redux Template does not work with the latest typescript.
VS2017 > File > New > React Redux SPA Template
Change typescript version in package.json to: "typescript": "^2.8.0-dev.20180126"

Project fails to build and produces the following errors:

ERROR in [at-loader] ./ClientApp/components/Counter.tsx:31:3
TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'Component'.
Type 'typeof Counter' is not assignable to type 'StatelessComponent'.
Type 'typeof Counter' provides no match for the signature '(props: CounterState & { children?: ReactNode; }, context?: any): ReactElement | null'.
ERROR in [at-loader] ./ClientApp/components/FetchData.tsx:73:3
TS2345: Argument of type 'typeof FetchData' is not assignable to parameter of type 'Component'.
Type 'typeof FetchData' is not assignable to type 'StatelessComponent'.
Type 'typeof FetchData' provides no match for the signature '(props: WeatherForecastsState & { children?: ReactNode; }, context?: any): ReactElement | null'.
ERROR in [at-loader] ./ClientApp/configureStore.ts:20:19
TS2349: Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures.
ERROR in [at-loader] ./ClientApp/routes.tsx:10:12
TS2322: Type '{ path: string; component: typeof Counter; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{ path: string; component: typeof Counter; }' is not assignable to type 'Readonly'.
Types of property 'component' are incompatible.
Type 'typeof Counter' is not assignable to type 'StatelessComponent | undefined> | ComponentClass Type 'typeof Counter' is not assignable to type 'ComponentClass | undefined>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'RouteComponentProps | undefined' is not assignable to type 'CounterProps | undefined'.
Type 'RouteComponentProps' is not assignable to type 'CounterProps | undefined'.
Type 'RouteComponentProps' is not assignable to type 'CounterProps'.
Type 'RouteComponentProps' is not assignable to type 'CounterState'.
Property 'count' is missing in type 'RouteComponentProps'.
ERROR in [at-loader] ./ClientApp/routes.tsx:11:12
TS2322: Type '{ path: string; component: typeof FetchData; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{ path: string; component: typeof FetchData; }' is not assignable to type 'Readonly'.
Types of property 'component' are incompatible.
Type 'typeof FetchData' is not assignable to type 'StatelessComponent | undefined> | ComponentClass Type 'typeof FetchData' is not assignable to type 'ComponentClass | undefined>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'RouteComponentProps | undefined' is not assignable to type 'WeatherForecastProps | undefined'.
Type 'RouteComponentProps' is not assignable to type 'WeatherForecastProps | undefined'.
Type 'RouteComponentProps' is not assignable to type 'WeatherForecastProps'.
Type 'RouteComponentProps' is not assignable to type 'WeatherForecastsState'.
Property 'isLoading' is missing in type 'RouteComponentProps'.
ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:109:81
TS2344: Type 'ChangeTargetHTMLAttributes' does not satisfy the constraint 'DOMAttributes'.
Types of property 'onChange' are incompatible.
Type 'EventHandler> | undefined' is not assignable to type 'EventHandler> | undefined'.
Type 'EventHandler>' is not assignable to type 'EventHandler> | undefined'.
Type 'EventHandler>' is not assignable to type 'EventHandler>'.
Types of parameters 'event' and 'event' are incompatible.
Type 'FormEvent' is not assignable to type 'ChangeEvent'.
Types of property 'target' are incompatible.
Type 'EventTarget' is not assignable to type 'EventTarget & T'.
Type 'EventTarget' is not assignable to type 'T'.
ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:2479:15
TS2430: Interface 'ChangeTargetHTMLAttributes' incorrectly extends interface 'HTMLAttributes'.
Types of property 'onChange' are incompatible.
Type 'EventHandler> | undefined' is not assignable to type 'EventHandler> | undefined'.
Type 'EventHandler>' is not assignable to type 'EventHandler> | undefined'.
Type 'EventHandler>' is not assignable to type 'EventHandler>'.
Types of parameters 'event' and 'event' are incompatible.
Type 'FormEvent' is not assignable to type 'ChangeEvent'.
Types of property 'target' are incompatible.
Type 'EventTarget' is not assignable to type 'EventTarget & T'.
Type 'EventTarget' is not assignable to type 'T'.

Most helpful comment

I have the same issue and cannot solve some errors (e.g. TS2322, TS2344) by just casting to any. In the first place there seems still typescript in the latest reactredux template. How can I get a template without typescript?

All 4 comments

Sorry for the inconvenience. You can either cast to any or stick with the older version of TypeScript.

This issue doesn't apply to the newer React template (because it doesn't use TypeScript) so it's effectively fixed, in that no change to the code in our repos would be relevant, hence closing.

I have the same issue and cannot solve some errors (e.g. TS2322, TS2344) by just casting to any. In the first place there seems still typescript in the latest reactredux template. How can I get a template without typescript?

@SteveSandersonMS Could you provide some clarification on why the newer version of the template does not use typescript and when/where we could get it?

Thank you!

3 Months now, don't expect an answer

Was this page helpful?
0 / 5 - 0 ratings