Update types

Author: codeBelt

package.json

@@ -91,6 +91,7 @@
     "rimraf": "2.6.1",
     "robotstxt-webpack-plugin": "2.0.0",
     "style-loader": "0.18.2",
+    "tslib": "1.7.1",
     "typescript": "2.4.2",
     "webpack-dev-middleware": "1.11.0",
     "webpack-hot-middleware": "2.18.2"

src/RouterWrapper.tsx

@@ -17,7 +17,7 @@ interface IProviderWrapperProps {
     context?: any;
 }
 
-const RouterWrapper: React.StatelessComponent<IStore> = (props: IProviderWrapperProps): JSX.Element  => {
+const RouterWrapper: React.StatelessComponent<IProviderWrapperProps> = (props: IProviderWrapperProps): JSX.Element  => {
     const Router = props.isServerSide ? StaticRouter : BrowserRouter;
 
     return (

src/client.tsx

@@ -20,7 +20,7 @@ const store: ISagaStore<IStore>  = ProviderService.createProviderStore(initialSt
 
 delete (window as any)['__STATE__'];
 
-const render = (Component: React.StatelessComponent) =>
+const render = (Component: any) =>
     ReactDOM.render(
         <AppContainer>
             <Component store={store} />

src/interfaces/IContactForm.ts

@@ -0,0 +1,10 @@
+interface IContactForm {
+    name: string;
+    email: string;
+    message: string;
+    exampleSelect1: string;
+    codeQualityRadio: string;
+    starred: string;
+}
+
+export default IContactForm;

src/interfaces/IController.ts

@@ -1,7 +1,7 @@
-import * as hapi from 'hapi';
+import * as Hapi from 'hapi';
 
 interface IController {
-    mapRoutes(server: hapi.Server): void;
+    mapRoutes(server: Hapi.Server): void;
 }
 
 export default IController;

src/server/controllers/AssetsController.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import * as path from 'path';
 import * as Hapi from 'hapi';
 import IController from '../../interfaces/IController';
 
@@ -8,7 +8,7 @@ class AssetsController implements IController{
         server.route({
             method: 'GET',
             path: '/assets/{file*}',
-            handler: (request: hapi.Request, reply: hapi.ReplyNoContinue) => {
+            handler: (request: Hapi.Request, reply: Hapi.ReplyNoContinue) => {
                 reply.file(path.resolve(__dirname, `../../public${request.path}`));
             },
         });

src/server/controllers/ReactController.tsx

@@ -1,5 +1,5 @@
 import {renderToString} from 'react-dom/server';
-import path from 'path';
+import * as path from 'path';
 import * as fse from 'fs-extra';
 import * as React from 'react';
 import RouterWrapper from '../../RouterWrapper';
@@ -16,7 +16,7 @@ class ReactController implements IController {
         server.route({
             method: 'GET',
             path: '/{route*}',
-            handler: async (request: hapi.Request, reply: hapi.ReplyNoContinue): Promise<void> => {
+            handler: async (request: Hapi.Request, reply: Hapi.ReplyNoContinue): Promise<void> => {
                 const store: ISagaStore<IStore> = ProviderService.createProviderStore({}, true);
                 const context: any = {};
                 const app = (

src/server/plugin/HapiWebpackHotPlugin.ts

@@ -1,15 +1,15 @@
-import Webpack from 'webpack';
-import ServerManager from '../ServerManager';
-import HapiWebpackPlugin from 'hapi-webpack-plugin';
-import notifier from 'node-notifier';
+import * as Webpack from 'webpack';
+import * as HapiWebpackPlugin from 'hapi-webpack-plugin';
+import * as notifier from 'node-notifier';
 import * as Hapi from 'hapi';
+import ServerManager from '../ServerManager';
 
 class HapiWebpackHotPlugin {
 
     constructor(server: Hapi.Server) {
-        const compiler = new Webpack(require('../../../webpack.config.js'));
+        const compiler: any = new Webpack(require('../../../webpack.config.js'));
 
-        compiler.plugin('done', (stats) => this._onDone(stats));
+        compiler.plugin('done', (stats: any) => this._onDone(stats));
 
         const options = {
             assets: {
@@ -32,7 +32,7 @@ class HapiWebpackHotPlugin {
         });
     }
 
-    private _onDone(stats): void {
+    private _onDone(stats: any): void {
         const pkg = require('../../../package.json');
         const time = ((stats.endTime - stats.startTime) / 1000).toFixed(2);
 
@@ -44,7 +44,7 @@ class HapiWebpackHotPlugin {
             title: pkg.name,
             message: `WebPack is done!\n${stats.compilation.errors.length} errors in ${time}s`,
             timeout: 1,
-        });
+        } as any);
     }
 
 }

src/services/ServerService.ts

@@ -1,16 +1,18 @@
+import * as Hapi from 'hapi';
+
 class ServerService {
 
-    public static createLocationObject(request) {
-        const protocal = request.headers['x-forwarded-proto'] || request.connection.info.protocol;
+    public static createLocationObject(request: Hapi.Request): any {
+        const protocol: string = request.headers['x-forwarded-proto'] || request.connection.info.protocol;
 
         return {
             ...request.url,
             host: request.info.host,
             hostname: request.info.host.split(':')[0],
-            href: `${protocal}://${request.info.host}${request.url.path}`,
-            origin: `${protocal}://${request.info.host}`,
+            href: `${protocol}://${request.info.host}${request.url.path}`,
+            origin: `${protocol}://${request.info.host}`,
             pathname: request.url.path.split('?')[0],
-            protocal: `${protocal}:`,
+            protocol: `${protocol}:`,
         };
     }
 

src/store/user/UserSaga.ts

@@ -1,10 +1,11 @@
 import {put} from 'redux-saga/effects';
 import UserAction from './UserAction';
 import LoadingAction from '../loading/LoadingAction';
+import IAction from '../../interfaces/IAction';
 
 class UserSaga {
 
-    static* loadUser(action) {
+    static* loadUser(action: IAction<void> = null) {
         yield put({
             type: LoadingAction.SET_LOADING,
             payload: true,

src/views/About.tsx

@@ -3,11 +3,12 @@ import {connect} from 'react-redux';
 import MetaAction from '../store/meta/MetaAction';
 import IStore from '../interfaces/IStore';
 import {Dispatch} from "redux";
+import IMetaReducerState from '../interfaces/reducers/IMetaReducerState';
 
 const mapStateToProps = (state: IStore) => ({});
 
 const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
-    setMeta: (meta) => dispatch(MetaAction.setMeta(meta)),
+    setMeta: (meta: IMetaReducerState) => dispatch(MetaAction.setMeta(meta)),
 });
 
 class About extends React.Component<any, void> {

src/views/Contact.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 import MetaAction from '../store/meta/MetaAction';
-import {Field, FormProps, reduxForm} from 'redux-form';
+import {reduxForm, Field, FormProps, FormErrors} from 'redux-form';
 import IStore from '../interfaces/IStore';
 import {Dispatch} from 'redux';
+import IContactForm from '../interfaces/IContactForm';
+import IMetaReducerState from '../interfaces/reducers/IMetaReducerState';
 
 const mapStateToProps = (state: IStore) => ({});
 
 const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
-    setMeta: (meta) => dispatch(MetaAction.setMeta(meta)),
+    setMeta: (meta: IMetaReducerState) => dispatch(MetaAction.setMeta(meta)),
 });
 
-interface IContactProps extends FormProp {
+interface IContactProps extends FormProps {
 }
 
-class Contact extends React.Component<IContactProps, void> {
+class Contact extends React.Component {
 
-    _handleSubmitHandler = (formData) => this._onFormSubmit(formData);
+    private _handleSubmitHandler: Function = (formData: IContactForm) => this._onFormSubmit(formData);
 
     componentWillMount(): void {
         this.props.setMeta({title: 'Contact Page'});
@@ -121,13 +123,13 @@ class Contact extends React.Component<IContactProps, void> {
         );
     }
 
-    _onFormSubmit(formData) {
+    private _onFormSubmit(formData: IContactForm): void {
         console.info(formData);
 
         window.alert(JSON.stringify(formData, null, 2));
     }
 
-    _renderInputField(field) {
+    private _renderInputField(field: any): JSX.Element {
         const {meta: {touched, error}} = field;
         const className = `small text-danger ${touched && error ? '' : 'd-none'}`;
 
@@ -147,7 +149,7 @@ class Contact extends React.Component<IContactProps, void> {
         );
     }
 
-    _renderCheckbox(field) {
+    private _renderCheckbox(field: any): JSX.Element {
         return (
             <label
                 className="form-check-label"
@@ -163,7 +165,7 @@ class Contact extends React.Component<IContactProps, void> {
         );
     }
 
-    _renderRadio(field) {
+    private _renderRadio(field: any): JSX.Element {
         return (
             <div className="form-check">
                 <label htmlFor={field.input.name} className="form-check-label">
@@ -183,7 +185,7 @@ class Contact extends React.Component<IContactProps, void> {
         );
     }
 
-    _renderTextArea(field) {
+    private _renderTextArea(field: any): JSX.Element {
         const {meta: {touched, error}} = field;
         const className = `small text-danger ${touched && error ? '' : 'd-none'}`;
 
@@ -203,7 +205,7 @@ class Contact extends React.Component<IContactProps, void> {
     }
 
     /* eslint-disable jsx-a11y/label-has-for */
-    _renderSelect(field) {
+    private _renderSelect(field: any): JSX.Element {
         return (
             <div>
                 <label htmlFor={field.name}>
@@ -228,9 +230,9 @@ class Contact extends React.Component<IContactProps, void> {
 
 export default reduxForm({
     form: 'contactForm',
-    validate: (formData) => {
-        const errors = {};
-        const validEmailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+    validate: (formData: Readonly<IContactForm>) => {
+        const errors: FormErrors<IContactForm> = {};
+        const validEmailRegex: RegExp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
 
         if (!validEmailRegex.test(formData.email)) {
             errors.email = 'Invalid email address';

src/views/Home.tsx

@@ -7,22 +7,29 @@ import {Dispatch} from 'redux';
 import IMetaReducerState from '../interfaces/reducers/IMetaReducerState';
 import IUserReducerState from '../interfaces/reducers/IUserReducerState';
 
-const mapStateToProps = (state: IStore) => ({
+interface IStateToProps {
+    readonly user: IUserReducerState;
+}
+
+interface IDispatchToProps {
+    loadUser: () => void;
+    setMeta: (meta: IMetaReducerState) => void;
+}
+
+const mapStateToProps = (state: IStore): IStateToProps => ({
     user: state.userReducer,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
+const mapDispatchToProps = (dispatch: Dispatch<any>): IDispatchToProps => ({
     loadUser: () => dispatch(UserAction.loadUser()),
     setMeta: (meta: IMetaReducerState) => dispatch(MetaAction.setMeta(meta)),
 });
 
-interface IHomeProps {
-    readonly user: IUserReducerState;
-    loadUser: () => void,
-    setMeta: (meta: IMetaReducerState) => void,
+
+interface IHomeProps extends IStateToProps, IDispatchToProps {
 }
 
-class Home extends React.Component<IHomeProps, void> {
+class Home extends React.Component<IStateToProps & IDispatchToProps, void> {
 
     componentWillMount(): void {
         this.props.setMeta({
@@ -58,5 +65,5 @@ class Home extends React.Component<IHomeProps, void> {
 
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Home);
+export default connect<IStateToProps, IDispatchToProps, any>(mapStateToProps, mapDispatchToProps)(Home);
 

src/views/landmarks/Header.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {NavLink} from 'react-router-dom';
 
-class Header extends React.Component<void, void> {
+class Header extends React.Component {
 
     public render(): JSX.Element {
         return (

tsconfig.json

@@ -1,21 +1,46 @@
 {
   "compilerOptions": {
-    "allowJs": true,
     "allowSyntheticDefaultImports": true,
-    "alwaysStrict": true,
+    // no errors on commonjs default import
+    "allowJs": true,
+    // include js files
+    "checkJs": true,
+    // typecheck js files
     "declaration": false,
+    // don't emit declarations
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
     "importHelpers": true,
+    // importing helper functions from tslib
+    "noEmitHelpers": true,
+    // disable emitting inline helper functions
     "jsx": "react",
+    // process JSX
+    "lib": [
+      "dom",
+      "es2016",
+      "es2017.object"
+    ],
+    "target": "es5",
+    // "es2015" for ES6+ engines
     "module": "commonjs",
+    // "es2015" for tree-shaking
     "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
-    "noUnusedParameters": false,
-    "removeComments": true,
-    "pretty": true,
-    "sourceMap": true,
+    "noImplicitReturns": true,
     "noImplicitThis": true,
-    "target": "es2015"
+    "noUnusedLocals": false,
+    "strictNullChecks": false,
+    "pretty": true,
+    "removeComments": true,
+    "sourceMap": false
   },
+  "include": [
+    "src/**/*"
+  ],
   "exclude": [
     "node_modules"
   ]

yarn.lock

@@ -5688,6 +5688,10 @@ tryit@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
 
+tslib@1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.7.1.tgz#bc8004164691923a79fe8378bbeb3da2017538ec"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"