From cc669d10c21044ca4d7e178021df5cb850d70ec6 Mon Sep 17 00:00:00 2001
From: Zach Posten <zposten@gmail.com>
Date: Tue, 27 Feb 2018 23:23:58 -0600
Subject: [PATCH] Add support for typescript

---
 package.json             |  5 +++
 src/components/Hello.tsx | 11 +++++++
 src/index.tsx            |  9 ++++++
 tsconfig.json            | 13 ++++++++
 webpack.config.dev.js    | 68 ++++++++++++++++++++++------------------
 5 files changed, 76 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Hello.tsx
 create mode 100644 src/index.tsx
 create mode 100644 tsconfig.json

diff --git a/package.json b/package.json
index c48ad22..aace39c 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
   "author": "Zach Posten",
   "license": "MIT",
   "dependencies": {
+    "@types/react": "^16.0.38",
+    "@types/react-dom": "^16.0.4",
     "history": "^4.7.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -36,6 +38,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^8.0.0",
+    "awesome-typescript-loader": "^3.5.0",
     "babel-cli": "6.16.0",
     "babel-core": "6.17.0",
     "babel-loader": "^7.1.2",
@@ -73,7 +76,9 @@
     "redux-immutable-state-invariant": "^2.1.0",
     "rimraf": "2.5.4",
     "sass-loader": "^6.0.6",
+    "source-map-loader": "^0.2.3",
     "style-loader": "0.13.1",
+    "typescript": "^2.7.2",
     "webpack": "^3.0.0",
     "webpack-dev-middleware": "1.11.0",
     "webpack-hot-middleware": "2.18.2",
diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx
new file mode 100644
index 0000000..84ce229
--- /dev/null
+++ b/src/components/Hello.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface HelloProps { compiler: string; framework: string; }
+
+// 'HelloProps' describes the shape of props.
+// State is never set so we use the '{}' type.
+export class Hello extends React.Component<HelloProps, {}> {
+    render() {
+        return (<h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>);
+    }
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..b8aabd1
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { Hello } from "./components/Hello";
+
+ReactDOM.render(
+    <Hello compiler="TypeScript" framework="React" />,
+    document.getElementById("app")
+);
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..76c8fca
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "esnext",
+        "jsx": "react"
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}
\ No newline at end of file
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 8a9c9af..5335041 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -4,38 +4,16 @@ import webpack from 'webpack'
 
 
 export default {
-  devtool: 'eval-source-map',
-  stats: {
-    assets: false,
-    cached: false,
-    cachedAssets: false,
-    children: false,
-    chunks: false,
-    chunkModules: false,
-    chunkOrigins: false,
-    colors: false,
-    depth: false,
-    entrypoints: false,
-    errors: true,
-    errorDetails: true,
-    hash: false,
-    maxModules: 0,
-    modules: false,
-    performance: false,
-    providedExports: false,
-    publicPath: false,
-    reasons: false,
-    source: false,
-    timings: false,
-    usedExports: false,
-    version: false,
-    warnings: false
-  },
   entry: [
     'react-hot-loader/patch',
     'webpack-hot-middleware/client',
-    path.resolve(__dirname, 'src/index'),
+    path.resolve(__dirname, 'src/index.tsx'),
   ],
+  devtool: 'eval-source-map',
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: [".ts", ".tsx", ".js", ".json"],
+  },
   target: 'web',
   output: {
     path: path.resolve(__dirname, 'src'),
@@ -53,7 +31,11 @@ export default {
   ],
   module: {
     rules: [
-      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
+      {test: /\.tsx?$/, exclude: /node_modules/, use: ['babel-loader', 'awesome-typescript-loader']},
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
+
+      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
       {test: /\.css$/, use: [
         'style-loader',
         'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
@@ -68,5 +50,31 @@ export default {
         'sass-loader',    // 1. Compile SASS into CSS
       ]},
     ]
-  }
+  },
+  stats: {
+    assets: false,
+    cached: false,
+    cachedAssets: false,
+    children: false,
+    chunks: false,
+    chunkModules: false,
+    chunkOrigins: false,
+    colors: false,
+    depth: false,
+    entrypoints: false,
+    errors: true,
+    errorDetails: true,
+    hash: false,
+    maxModules: 0,
+    modules: false,
+    performance: false,
+    providedExports: false,
+    publicPath: false,
+    reasons: false,
+    source: false,
+    timings: false,
+    usedExports: false,
+    version: false,
+    warnings: false
+  },
 }
\ No newline at end of file