Add basic typescript integration

.babelrc.json

@@ -9,6 +9,7 @@
                 "opera": "44"
             }
         }],
+        "@babel/preset-typescript",
         "@babel/preset-react"
     ]
 }

.eslintrc.json

@@ -4,7 +4,7 @@
         "browser": true,
         "es6": true
     },
-    "extends": ["eslint:recommended", "standard", "standard-jsx", "react-app"],
+    "extends": ["eslint:recommended", "standard", "standard-jsx", "react-app", "plugin:@typescript-eslint/recommended"],
     "parser": "@babel/eslint-parser",
     "parserOptions": {
         "ecmaVersion": "7",
@@ -13,7 +13,7 @@
         },
         "sourceType": "module"
     },
-    "plugins": ["flowtype", "react", "react-hooks"],
+    "plugins": ["flowtype", "react", "react-hooks", "@typescript-eslint"],
     "rules": {
         "indent": ["error", 4,
             {

package.json

@@ -8,14 +8,18 @@
   "scripts": {
     "watch": "webpack --watch --progress",
     "build": "webpack",
-    "eslint": "eslint --ext .js --ext .jsx src/",
+    "eslint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx src/",
-    "eslint:fix": "eslint --fix --ext .js --ext .jsx src/"
+    "eslint:fix": "eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx src/"
   },
   "devDependencies": {
     "@babel/core": "^7.5.4",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.16.7",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
     "babel-loader": "^8.0.6",
     "chrome-remote-interface": "^0.31.0",
     "compression-webpack-plugin": "^9.0.0",
@@ -33,6 +37,7 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-webpack-plugin": "^3.1.1",
+    "fork-ts-checker-webpack-plugin": "^7.2.6",
     "htmlparser": "^1.7.7",
     "jed": "^1.1.1",
     "mini-css-extract-plugin": "^2.5.3",

src/app.tsx

@@ -21,14 +21,18 @@ import cockpit from 'cockpit';
 import React from 'react';
 import { Alert, Card, CardTitle, CardBody } from '@patternfly/react-core';
 
+interface ApplicationState {
+    hostname: string;
+}
+
 const _ = cockpit.gettext;
 
-export class Application extends React.Component {
+export class Application extends React.Component<unknown, ApplicationState> {
-    constructor() {
+    constructor(props: unknown) {
-        super();
+        super(props);
         this.state = { hostname: _("Unknown") };
 
-        cockpit.file('/etc/hostname').watch(content => {
+        cockpit.file('/etc/hostname').watch((content: string) => {
             this.setState({ hostname: content.trim() });
         });
     }

src/index.ts

@@ -21,7 +21,7 @@ import "./lib/patternfly/patternfly-4-cockpit.scss";
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Application } from './app.jsx';
+import { Application } from './app';
 /*
  * PF4 overrides need to come after the JSX components imports because
  * these are importing CSS stylesheets that we are overriding

src/types/cockpit.ts

@@ -0,0 +1,5 @@
+declare module 'cockpit' {
+   export function gettext(prop: string): string;
+   export function file(prop: any): any;
+   export function format(...prop:any): any;
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+   "compilerOptions": {
+     "target": "es2015",
+     "module": "commonjs",
+     "lib": ["dom", "es2017"],
+     "strict": true,
+     "strictNullChecks": true,
+     "noUnusedLocals": true,
+     "moduleResolution": "node",
+     "noEmitOnError": true,
+     "esModuleInterop": true,
+     "jsx": "react",
+     "types": [ "src/types" ]
+   }
+ }
+ 

webpack.config.js

@@ -9,6 +9,7 @@ const CompressionPlugin = require("compression-webpack-plugin");
 const ESLintPlugin = require('eslint-webpack-plugin');
 const CockpitPoPlugin = require("./src/lib/cockpit-po-plugin");
 const CockpitRsyncPlugin = require("./src/lib/cockpit-rsync-plugin");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 /* A standard nodejs and webpack pattern */
 const production = process.env.NODE_ENV === 'production';
@@ -30,10 +31,11 @@ const plugins = [
     new extract({filename: "[name].css"}),
     new CockpitPoPlugin(),
     new CockpitRsyncPlugin({dest: packageJson.name}),
+    new ForkTsCheckerWebpackPlugin()
 ];
 
 if (eslint) {
-    plugins.push(new ESLintPlugin({ extensions: ["js", "jsx"], failOnWarning: true, }));
+    plugins.push(new ESLintPlugin({ extensions: ["js", "jsx", "ts", "tsx"], failOnWarning: true, }));
 }
 
 /* Only minimize when in production mode */
@@ -49,6 +51,7 @@ module.exports = {
     resolve: {
         modules: [ "node_modules", path.resolve(__dirname, 'src/lib') ],
         alias: { 'font-awesome': 'font-awesome-sass/assets/stylesheets' },
+        extensions: ['.tsx', '.ts', '.js', '.jsx']
     },
     resolveLoader: {
         modules: [ "node_modules", path.resolve(__dirname, 'src/lib') ],
@@ -57,7 +60,7 @@ module.exports = {
         ignored: /node_modules/,
     },
     entry: {
-        index: "./src/index.js",
+        index: "./src/index.ts",
     },
     // cockpit.js gets included via <script>, everything else should be bundled
     externals: { "cockpit": "cockpit" },
@@ -85,7 +88,7 @@ module.exports = {
             {
                 exclude: /node_modules/,
                 use: "babel-loader",
-                test: /\.(js|jsx)$/
+                test: /\.(js|jsx|ts|tsx)$/
             },
             /* HACK: remove unwanted fonts from PatternFly's css */
             {