Migration to TypeScript :)

app/app.tsx

@@ -8,11 +8,11 @@ import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import getMuiTheme from 'material-ui/styles/getMuiTheme'
 
 import { Provider } from 'react-redux'
-import store, { history } from 'configureStore'
+import store, { history } from 'store/configureStore'
 import { ConnectedRouter } from 'react-router-redux'
 
 // - Import app components
-import Master from 'Master'
+import Master from 'components/Master'
 
 // - Impport actions
 
@@ -44,7 +44,6 @@ ReactDOM.render(
 			<MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
 				<Master />
 			</MuiThemeProvider>
-
 		</ConnectedRouter>
 	</Provider>,
 	document.getElementById('app')

package.json

@@ -12,11 +12,6 @@
   "license": "MIT",
   "dependencies": {
     "axios": "^0.16.1",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
     "classnames": "^2.2.5",
     "css-loader": "^0.28.0",
     "deep-freeze-strict": "^1.1.1",
@@ -54,11 +49,23 @@
     "script-loader": "^0.7.0",
     "style-loader": "^0.16.1",
     "url-loader": "^0.5.8",
-    "uuid": "^3.0.1",
+    "uuid": "^3.0.1"
-    "webpack": "^2.4.1"
   },
   "devDependencies": {
+    "@types/material-ui": "^0.18.2",
+    "@types/react": "^16.0.10",
+    "@types/react-dom": "^16.0.1",
+    "@types/react-redux": "^5.0.10",
+    "@types/react-router-dom": "^4.0.8",
+    "@types/react-router-redux": "^5.0.8",
+    "@types/webpack": "^3.0.13",
+    "@types/node": "^8.0.33",
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^0.28.7",
     "karma": "^1.6.0",
     "karma-chrome-launcher": "^2.0.0",
@@ -68,7 +75,13 @@
     "karma-webpack": "^2.0.3",
     "mocha": "^3.2.0",
     "redux-logger": "^3.0.1",
-    "redux-mock-store": "^1.2.3"
+    "redux-mock-store": "^1.2.3",
+    "source-map-loader": "^0.2.2",
+    "ts-loader": "^2.3.7",
+    "typescript": "^2.5.3",
+    "ts-node": "^3.3.0",
+    "tslint": "^5.7.0",
+    "webpack": "^3.6.0"
   },
   "engines": {
     "node": "7.3.0",

tsconfig.json

@@ -0,0 +1,26 @@
+{
+
+    "compilerOptions": {
+    "module": "es6", // use ES2015 modules
+    "target": "es6", // compile to ES2015 (Babel will do the rest)
+    "allowSyntheticDefaultImports": true, // see below
+    "baseUrl": "./app", // enables you to import relative to this folder
+    "paths": {
+      "angular2/*": ["../path/to/angular2/*"],
+      "local/*": ["../path/to/local/modules/*"]
+    },
+    "sourceMap": true, // make TypeScript generate sourcemaps
+    "outDir": "public", // output directory to build to (irrelevant because we use Webpack most of the time)
+    "jsx": "preserve", // enable JSX mode, but "preserve" tells TypeScript to not transform it (we'll use Babel)
+    "strict": true,
+    "moduleResolution": "node",
+    "allowJs": true
+    
+  },
+  "include":[
+    "app/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

webpack.config.js

@@ -13,9 +13,14 @@ try {
 
 }
 
+var babelOptions = {
+  plugins: ['transform-decorators-legacy'],
+  presets: ['react', 'env', 'stage-0']
+};
+
 module.exports = {
   entry: [
-    './app/app.jsx'
+    './app/app.tsx'
   ],
   externals: {
     jquery: 'jQuery'
@@ -75,57 +80,77 @@ module.exports = {
     ],
     alias: {
       app: 'app',
+      components: 'app/components',
+      db: 'app/db',
+      store: 'app/store',
       applicationStyles: 'app/styles/app.scss',
       actions: 'app/actions/actions.jsx',
       actionTypes: 'app/constants/actionTypes.jsx',
       configureStore: 'app/store/configureStore.jsx'
 
     },
-    extensions: [' ', '.scss', '.js', '.jsx']
+    extensions: [' ', '.scss', ".ts", ".tsx", ".js", ".json", '.jsx']
   },
   module: {
-    rules: [{
+    rules: [
-      test: /\.jsx$/,
+      {
-      exclude: /(node_modules|bower_components)/,
+        test: /\.ts(x?)$/,
-      use: {
+        exclude: /node_modules/,
-        loader: 'babel-loader',
+        use: [
-        options: {
+          {
-          plugins: ['transform-decorators-legacy'],
+            loader: 'babel-loader',
-          presets: ['react', 'env', 'stage-0']
+            options: babelOptions
+          },
+          {
+            loader: 'ts-loader',
+            options: { transpileOnly: true }
+          }
+        ]
+      },
+      {
+        enforce: "pre",
+        test: /\.js$/,
+        loader: "source-map-loader"
+      },
+      {
+        test: /\.jsx$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: babelOptions
         }
+      },
+      {
+        test: /\.scss$/,
+        use: [{
+          loader: "style-loader"
+        }, {
+          loader: "css-loader"
+        }, {
+          loader: "sass-loader",
+          options: {
+            includePaths: [
+
+            ]
+          }
+        }]
+      },
+      {
+        test: /\.css$/,
+        use: [{
+          loader: "style-loader"
+        }, {
+          loader: "css-loader"
+
+        }]
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader'
+      }, {
+        test: /\.(jpe?g|png|webp|gif|cur)$/,
+        loader: 'file-loader?name=/images/[name].[ext]'
       }
-    },
-    {
-      test: /\.scss$/,
-      use: [{
-        loader: "style-loader"
-      }, {
-        loader: "css-loader"
-      }, {
-        loader: "sass-loader",
-        options: {
-          includePaths: [
-
-          ]
-        }
-      }]
-    },
-    {
-      test: /\.css$/,
-      use: [{
-        loader: "style-loader"
-      }, {
-        loader: "css-loader"
-
-      }]
-    },
-    {
-      test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'url-loader'
-    }, {
-      test: /\.(jpe?g|png|webp|gif|cur)$/,
-      loader: 'file-loader?name=/images/[name].[ext]'
-    }
 
 
     ]