typescript working with babel and electron including App.tsx, tested only on windows

Author: ChristianEdwardPadilla

.babelrc

@@ -8,8 +8,7 @@
     ],
     "react",
     "stage-0"
+    // "@babel/preset-typescript"
   ],
-  "plugins": [
-    "transform-es2015-modules-commonjs"
-  ]
-}
+  "plugins": ["transform-es2015-modules-commonjs"]
+}

package.json

@@ -77,11 +77,14 @@
   "dependencies": {
     "@material-ui/core": "^1.4.1",
     "@material-ui/icons": "^2.0.0",
+    "@types/react": "^16.8.14",
+    "@types/react-dom": "^16.8.4",
     "autoprefixer": "^9.0.1",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
     "cli-spinner": "^0.2.8",
     "commander": "^2.17.1",
+    "electron": "^2.0.7",
     "enzyme": "^3.4.1",
     "konva": "^2.1.7",
     "localforage": "^1.7.2",
@@ -97,11 +100,12 @@
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.5",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0",
-    "electron": "^2.0.7"
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
@@ -131,6 +135,7 @@
     "postcss-loader": "^2.1.6",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.20.3",
+    "typescript": "^3.4.4",
     "webpack": "^4.4.0",
     "webpack-cli": "^3.3.0"
   }

src/components/App.jsx renamed to src/components/App.tsx

@@ -4,8 +4,18 @@ import { MuiThemeProvider } from '@material-ui/core/styles';
 import theme from './theme';
 import AppContainer from '../containers/AppContainer.jsx';
 
+interface Adam {
+  goodguy: boolean;
+  haswine: boolean;
+}
+
 class App extends Component {
   render() {
+    const adamInstance: Adam = {
+      goodguy: true,
+      haswine: false,
+    };
+    console.log(adamInstance);
     return (
       <MuiThemeProvider theme={theme}>
         <div className="app">

src/components/__tests__/App.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 // import '../../setupTests';
 import { shallow } from 'enzyme';
-import App from '../App.jsx';
+import App from '../App.tsx';
 import AppContainer from '../../containers/AppContainer.jsx';
 
 it('contains a AppContainer', () => {

src/index.js

@@ -2,7 +2,7 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import App from './components/App.jsx';
+import App from './components/App.tsx';
 import store from './store';
 
 ReactDOM.render(

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./build/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
+    //these two options are recommended but don't work, maybe an issue with awesome-typsecript-loader vs babel
+    // "esModuleInterop": true
+    // "allowSyntheticDefaultImports": true
+  },
+  "include": ["./src/**/*"]
+}

tslint.json

@@ -0,0 +1,19 @@
+{
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+  "tslint.autoFixOnSave": true,
+  "linterOptions": {
+    "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
+  },
+  "rules": {
+    "quotemark": [true, "single", "avoid-escape", "avoid-template", "jsx-double"],
+    "jsx-boolean-value": false,
+    "jsx-no-lambda": false,
+    "jsx-no-multiline-js": false,
+    "object-literal-sort-keys": false,
+    "member-ordering": false,
+    "no-console": false,
+    "ordered-imports": false,
+    "comment-format": false
+    // "jsx-key": false,
+  }
+}

webpack.config.development.js

@@ -1,3 +1,4 @@
+/* eslint-disable linebreak-style */
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -20,6 +21,7 @@ module.exports = {
   },
   module: {
     rules: [
+      { test: /\.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
@@ -57,6 +59,7 @@ module.exports = {
       },
     ],
   },
+
   plugins: [
     // new CleanWebpackPlugin([BUILD_DIR]),
     new HtmlWebpackPlugin({