Add TypeScript support

.babelrc

@@ -1,3 +1,11 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": [
+    "@babel/env",
+    "@babel/react",
+    ["@babel/typescript", {
+      "isTSX": true,
+      "allExtensions": true
+    }]
+  ],
+  "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"]
 }

.eslintrc

@@ -10,6 +10,14 @@
   "rules": {
     "prettier/prettier": ["error"],
     "import/no-extraneous-dependencies": 0,
-    "react/jsx-filename-extension": 0
+    "react/jsx-filename-extension": 0,
+    "react/prop-types": 0
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   }
 }

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        { "language": "typescript", "autoFix": true },
+        { "language": "typescriptreact", "autoFix": true }
+    ],
+}

build-utils/addons/webpack.bundleanalyze.js → build-utils/addons/webpack.bundleanalyze.ts

@@ -1,11 +1,12 @@
-const WebpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WebpackBundleAnalyzer = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 
 module.exports = {
   plugins: [
     new WebpackBundleAnalyzer({
       analyzerMode: 'static',
       reportFilename: './report.html',
-      openAnalyzer: false
-    })
-  ]
-};
+      openAnalyzer: false,
+    }),
+  ],
+};

build-utils/addons/webpack.bundlevisualizer.js → build-utils/addons/webpack.bundlevisualizer.ts

@@ -1,7 +1,5 @@
 const Visualizer = require('webpack-visualizer-plugin');
 
 module.exports = {
-  plugins: [
-    new Visualizer()
-  ]
-};
+  plugins: [new Visualizer()],
+};

build-utils/webpack.common.js → build-utils/webpack.common.ts

@@ -3,18 +3,18 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: './src/index',
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        test: /\.(ts|tsx|js|jsx)$/,
         exclude: /node_modules/,
         use: ['babel-loader', 'eslint-loader'],
       },
     ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx'],
+    extensions: ['*', '.ts', '.tsx', '.js', '.jsx'],
   },
   plugins: [
     new CleanWebpackPlugin(),

build-utils/webpack.config.js → build-utils/webpack.config.ts

@@ -3,7 +3,7 @@
 
 const webpackMerge = require('webpack-merge');
 
-const commonConfig = require('./webpack.common.js');
+const commonConfig = require('./webpack.common.ts');
 
 const getAddons = addonsArgs => {
   const addons = Array.isArray(addonsArgs)
@@ -12,11 +12,11 @@ const getAddons = addonsArgs => {
 
   return addons
     .filter(Boolean)
-    .map(name => require(`./addons/webpack.${name}.js`));
+    .map(name => require(`./addons/webpack.${name}.ts`));
 };
 
 module.exports = ({ env, addon }) => {
-  const envConfig = require(`./webpack.${env}.js`);
+  const envConfig = require(`./webpack.${env}.ts`);
 
   return webpackMerge(commonConfig, envConfig, ...getAddons(addon));
 };

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --config build-utils/webpack.config.js --env.env=dev",
-    "build": "webpack --config build-utils/webpack.config.js --env.env=prod",
+    "start": "webpack-dev-server --config build-utils/webpack.config.ts --env.env=dev",
+    "build": "webpack --config build-utils/webpack.config.ts --env.env=prod",
     "build:analyze": "npm run build -- --env.addon=bundleanalyze --env.addon=bundlevisualizer",
     "test": "echo \"Error: no test specified\" && exit 0"
   },
@@ -14,8 +14,14 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
+    "@babel/preset-typescript": "^7.6.0",
+    "@types/react": "^16.9.9",
+    "@types/react-dom": "^16.9.2",
+    "@types/webpack-env": "^1.14.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
@@ -39,7 +45,6 @@
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "dependencies": {
-    "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2"
   }

src/App.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface AppProps {
+  title: string;
+}
+
+const App: React.FC<AppProps> = ({ title }) => <div>{title}</div>;
+
+export default App;