console: add TypeScript setup (#3902)

console/.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "transform-react-remove-prop-types",

console/.gitignore

@@ -11,4 +11,4 @@ npm-debug.log
 coverage
 .idea/*
 test
-**/.tern-port
+**/.tern-port

console/package.json

@@ -125,8 +125,11 @@
     "@babel/plugin-syntax-import-meta": "^7.2.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.8.3",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.0.0",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-istanbul": "^5.1.1",
@@ -155,6 +158,7 @@
     "file-loader": "^1.1.11",
     "font-awesome": "^4.7.0",
     "font-awesome-webpack": "0.0.4",
+    "fork-ts-checker-webpack-plugin": "^4.0.2",
     "husky": "^0.14.3",
     "ignore-loader": "^0.1.2",
     "jquery": "^3.4.1",
@@ -175,9 +179,11 @@
     "resolve-url-loader": "^2.3.0",
     "sass-loader": "^7.0.1",
     "sinon": "^1.17.7",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^0.20.3",
     "terser-webpack-plugin": "^2.3.3",
     "timekeeper": "1.0.0",
+    "typescript": "^3.8.3",
     "unused-files-webpack-plugin": "^3.4.0",
     "url-loader": "^1.0.1",
     "webpack": "^4.14.0",

console/src/components/Common/Button/Button.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import styles from '../Common.scss';
 
 /*
@@ -9,7 +10,12 @@ import styles from '../Common.scss';
                and not the ones that change the appearance (color, font, size) of the button
 */
 
-const Button = props => {
+export interface ButtonProps extends React.ComponentProps<'button'> {
+  size: string;
+  color: 'yellow' | 'red' | 'green' | 'gray' | 'white' | 'black';
+}
+
+const Button: React.FC<ButtonProps> = props => {
   const { children, size, color, className, type = 'button' } = props;
   let extendedClassName = `${className || ''} btn ${
     size ? `btn-${size} ` : 'button '

console/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}

console/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["es6", "dom", "es2017"],
+    "checkJs": true,
+    "allowJs": true,
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "noEmitOnError": false
+  },
+  "exclude": ["node_modules"],
+  "include": ["src/**/*"]
+}

console/webpack/dev.config.js

@@ -17,6 +17,7 @@ const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
 const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
   require('./webpack-isomorphic-tools')
 );
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 // const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin');
 
@@ -56,7 +57,7 @@ module.exports = {
         type: 'javascript/auto',
       },
       {
-        test: /\.jsx?$/,
+        test: /\.(j|t)sx?$/,
         exclude: /node_modules/,
         use: 'babel-loader',
       },
@@ -132,7 +133,7 @@ module.exports = {
   },
   resolve: {
     modules: ['src', 'node_modules'],
-    extensions: ['.json', '.js', '.jsx', '.mjs'],
+    extensions: ['.json', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
   },
   plugins: [
     // hot reload
@@ -158,5 +159,11 @@ module.exports = {
       CONSOLE_ASSET_VERSION: Date.now().toString(),
     }),
     webpackIsomorphicToolsPlugin.development(),
+    new ForkTsCheckerWebpackPlugin({
+      compilerOptions: {
+        allowJs: false,
+        checkJs: false,
+      },
+    }),
   ],
 };

console/webpack/prod.config.js

@@ -15,6 +15,7 @@ const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(
 
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const cleanOptions = {
   root: process.cwd(),
@@ -48,7 +49,7 @@ module.exports = {
         type: 'javascript/auto',
       },
       {
-        test: /\.jsx?$/,
+        test: /\.(j|t)sx?$/,
         exclude: /node_modules/,
         use: 'babel-loader',
       },
@@ -124,7 +125,7 @@ module.exports = {
   },
   resolve: {
     modules: ['src', 'node_modules'],
-    extensions: ['.json', '.js', '.jsx', '.mjs'],
+    extensions: ['.json', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
   },
   optimization: {
     minimize: true,
@@ -196,5 +197,11 @@ module.exports = {
       },
       CONSOLE_ASSET_VERSION: Date.now().toString(),
     }),
+    new ForkTsCheckerWebpackPlugin({
+      compilerOptions: {
+        allowJs: false,
+        checkJs: false,
+      },
+    }),
   ],
 };