Typescript Refactor

README.md

@@ -557,6 +557,91 @@ ConnectedRelapseButton.propTypes = {
 }
 ```
 
+## Hey What About Typescript?
+
+Typescript Indeed... but what is it? Typescript is a superset of JavaScript that provides optional static typing, classes and interfaces. It helps as you develop by adding a richer environment to your IDE for spotting typos and coding errors.
+
+First, let's add the dependencies.
+
+`$ yarn add @types/react @types/react-dom typescript ts-loader source-map-loader`
+
+Next let's add a **TypeScript** configuration file.
+
+**tsconfig.json**
+
+```
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es6",
+        "jsx": "react"
+    }
+}
+```
+
+And update our webpack config.
+
+```
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+
+  devtool: "source-map",
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+          test: /\.ts(x?)$/,
+          exclude: /node_modules/,
+          use: [
+              {
+                  loader: "ts-loader"
+              }
+          ]
+      },
+      {
+          enforce: "pre",
+          test: /\.js$/,
+          loader: "source-map-loader"
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: "html-loader"
+          }
+        ]
+      }
+    ]
+  },
+  externals: {
+      "react": "React",
+      "react-dom": "ReactDOM"
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: "./src/index.html",
+      filename: "./index.html"
+    })
+  ]
+};
+```
+
+
+
+
+
 ## Finishing Up
 
 So, there it is... our sobriety/relapse tracker. I hope this tutorial didn't drive you to drink, but if it did feel safe in knowing that with this app, you're in control.

sample-react-redux-tutorial/package.json

@@ -7,6 +7,8 @@
     "@babel/core": "^7.6.0",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/react": "^16.9.9",
+    "@types/react-dom": "^16.9.2",
     "babel-loader": "^8.0.6",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
@@ -25,5 +27,10 @@
   "scripts": {
     "build": "webpack --mode production",
     "start": "webpack-dev-server --mode development"
+  },
+  "dependencies": {
+    "source-map-loader": "^0.2.4",
+    "ts-loader": "^6.2.0",
+    "typescript": "^3.6.4"
   }
 }

sample-react-redux-tutorial/src/components/App.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import DatePicker from './DatePicker.jsx';
+import DatePicker from './DatePicker.tsx';
 import RelapseList from './RelapseList.jsx';
 import RelapseButton from './RelapseButton.jsx';
 import TimeDisplay from './TimeDisplay.jsx';

sample-react-redux-tutorial/src/components/DatePicker.jsx → sample-react-redux-tutorial/src/components/DatePicker.tsx

@@ -3,20 +3,24 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { updateTimeSober } from '../actions/index';
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: any) {
   return {
-    dispatchUpdateSobrietyDate: timeSober => dispatch(updateTimeSober(timeSober)),
+    dispatchUpdateSobrietyDate: (timeSober: string) => dispatch(updateTimeSober(timeSober)),
   };
 };
 
-class ConnectedDatePicker extends React.Component {
+interface DatePickerProps {
+  dispatchUpdateSobrietyDate: any;
+};
+
+class ConnectedDatePicker extends React.Component<DatePickerProps, {}> {
   constructor() {
     super();
 
     this.handleChange = this.handleChange.bind(this);
   }
 
-  handleChange(el) {
+  handleChange(el: any) {
     el.preventDefault();
     const date = new Date(el.target.value).toUTCString();
     this.props.dispatchUpdateSobrietyDate(date);
@@ -27,10 +31,6 @@ class ConnectedDatePicker extends React.Component {
   }
 };
 
-ConnectedDatePicker.propTypes = {
-  dispatchUpdateSobrietyDate: PropTypes.func.isRequired,
-};
-
 const DatePicker = connect(null, mapDispatchToProps)(ConnectedDatePicker);
 
 export default DatePicker;

sample-react-redux-tutorial/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es6",
+        "jsx": "react"
+    }
+}

sample-react-redux-tutorial/webpack.config.js

@@ -2,6 +2,9 @@ const HtmlWebPackPlugin = require("html-webpack-plugin");
 
 module.exports = {
   entry: "./src/index.js",
+
+  devtool: "source-map",
+
   module: {
     rules: [
       {
@@ -11,6 +14,20 @@ module.exports = {
           loader: "babel-loader"
         }
       },
+      {
+          test: /\.ts(x?)$/,
+          exclude: /node_modules/,
+          use: [
+              {
+                  loader: "ts-loader"
+              }
+          ]
+      },
+      {
+          enforce: "pre",
+          test: /\.js$/,
+          loader: "source-map-loader"
+      },
       {
         test: /\.html$/,
         use: [
@@ -21,6 +38,10 @@ module.exports = {
       }
     ]
   },
+  externals: {
+      "react": "React",
+      "react-dom": "ReactDOM"
+  },
   plugins: [
     new HtmlWebPackPlugin({
       template: "./src/index.html",