Javascriptservices: Changes required for compiling in strict mode

[stephtr]

EDIT: This issue has nothing to do with projects generated using the template throwing errors while running webpack. For a solution to that problem see #1099.

---

Even though I'm not sure if TypeScript's strict should be activated by default, I think that the templates should at least compile when a user decides to enable strict mode.
At the moment the ReactRedux template throws a few issues:

• ./ClientApp/boot-client.tsx:5:30 TS7016: Could not find a declaration file for module 'react-hot-loader'.

• ./ClientApp/configureStore.ts:15:51 TS7006: Parameter 'f' implicitly has an 'any' type.

• ./ClientApp/configureStore.ts:33:27 TS7006: Parameter 'allReducers' implicitly has an 'any' type.

• ./ClientApp/store/WeatherForecasts.ts:63:7 TS2322: Type '{ startDateIndex: null; forecasts: never[]; isLoading: false; }' is not assignable to type 'WeatherForecastsState'. Types of property 'startDateIndex' are incompatible. Type 'null' is not assignable to type 'number'.

All of these issues can be fixed with just small modifications. Should I create a PR?

[mcquiggd]

Even with strict mode turned off, I get these errors:

ERROR in [at-loader] ./ClientApp/routes.tsx:9:12 
    TS2322: Type '{ exact: true; path: "/"; component: typeof Home; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
  Type '{ exact: true; path: "/"; component: typeof Home; }' is not assignable to type 'Readonly<T>'.

ERROR in [at-loader] ./ClientApp/routes.tsx:10:12 
    TS2322: Type '{ path: "/counter"; component: typeof Counter; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
  Type '{ path: "/counter"; component: typeof Counter; }' is not assignable to type 'Readonly<T>'.

ERROR in [at-loader] ./ClientApp/routes.tsx:11:12 
    TS2322: Type '{ path: "/fetchdata/:startDateIndex?"; component: typeof FetchData; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
  Type '{ path: "/fetchdata/:startDateIndex?"; component: typeof FetchData; }' is not assignable to type 'Readonly<T>'.

[stephtr]

These errors are independent from strict mode, therefore it would be better to create a new issue on github (see #1099). However I can confirm that these errors arise when creating a new project via yo.

[ghost]

Facing the same problem. These errors arise while creating a new React-Redux Project.

[varunpsr]

i don't face any issues while running restore or npm install however, when I run the application these are errors I get.

  ERROR in [at-loader] ./ClientApp/routes.tsx:10:12
      TS2322: Type '{ path: "/counter"; component: typeof Counter; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
    Type '{ path: "/counter"; component: typeof Counter; }' is not assignable to type 'Readonly<T>'.

  ERROR in [at-loader] ./ClientApp/routes.tsx:11:12
      TS2322: Type '{ path: "/fetchdata/:startDateIndex?"; component: typeof FetchData; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<T>> & Readonly<{ children?: ReactNode; }> & ...'.
    Type '{ path: "/fetchdata/:startDateIndex?"; component: typeof FetchData; }' is not assignable to type 'Readonly<T>'.

  ERROR in [at-loader] ./node_modules/@types/react-router/index.d.ts:67:21
      TS2694: Namespace 'React' has no exported member 'ComponentType'.

  ERROR in [at-loader] ./node_modules/@types/react-router/index.d.ts:102:48
      TS2694: Namespace 'React' has no exported member 'ComponentType'.
  Child extract-text-webpack-plugin:
      chunk    {0} extract-text-webpack-plugin-output-filename 4.08 kB [entry] [rendered]
          [0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
          [1] ./~/css-loader!./ClientApp/css/site.css 1.82 kB {0} [built]

`

[stephtr]

As I mentioned that has nothing to do with this issue. In #1099 a temporary workaround has been posted:
Update your package.json file to:

    ...
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-redux": "4.4.45",
    "@types/react-router-dom": "4.0.6",
    "@types/react-router-redux": "5.0.3",
    ...
    "typescript": "2.3.4",

Afterwards you just have to restore the packages, then the ReactRedux template should work again.

[SteveSandersonMS]

Thanks @stephtr for the pull request. That's now merged, so this issue is fixed.

Also, strict mode is now enabled in all the templates by default. I can't think of much of a reason people would want to avoid that, but if they do, it's much easier to turn off than to turn on.

[varunpsr]

Awesome, thank you! 👍