Start adding Typescript support

webpack/configuration.js

@@ -12,7 +12,7 @@ const settings = {
   test_root_path: `${FE_BUILD_DIR}-test`,
   cache_path: 'tmp/cache',
   resolved_paths: [],
-  extensions: [ '.mjs', '.js', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
+  extensions: [ '.mjs', '.js', '.jsx', '.ts', '.tsx', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
 };
 
 const outputDir = env.NODE_ENV === 'test' ? settings.test_root_path : settings.public_root_path;

webpack/rules/babel.js

@@ -2,13 +2,20 @@ const { join, resolve } = require('path');
 const { env, settings } = require('../configuration');
 
 module.exports = {
-  test: /\.(js|jsx|mjs)$/,
+  test: /\.(js|jsx|mjs|ts|tsx)$/,
   include: [
     settings.source_path,
     ...settings.resolved_paths,
   ].map(p => resolve(p)),
   exclude: /node_modules/,
   use: [
+    {
+      loader: 'ts-loader',
+      options: {
+        // disable type checker - we will use it in fork plugin
+        transpileOnly: true,
+      },
+    },
     {
       loader: 'babel-loader',
       options: {

webpack/rules/index.js

@@ -8,7 +8,6 @@ const nodeModules = require('./node_modules');
 
 // Webpack loaders are processed in reverse order
 // https://webpack.js.org/concepts/loaders/#loader-features
-// Lastly, process static files using file loader
 module.exports = [
   ...assets,
   css,

webpack/shared.js

@@ -7,6 +7,7 @@ const AssetsManifestPlugin = require('webpack-assets-manifest');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { env, settings, output } = require('./configuration');
 const rules = require('./rules');
 
@@ -72,6 +73,7 @@ module.exports = {
     new webpack.ProvidePlugin({
       process: 'process/browser',
     }),
+    new ForkTsCheckerWebpackPlugin(),
     new MiniCssExtractPlugin({
       filename: 'packs/css/[name]-[contenthash:8].css',
       chunkFilename: 'packs/css/[name]-[contenthash:8].chunk.css',