Add TypeScript support (getredash#5027)

* TASK Add typescript dependencies to package.json

* TASK Add typescript to build process and npm scripts and TASK Move example components to typescript and add an example definition file.

* TASK Move back to ts-loader instead of babel typescript preset

* FIX Remove unnecessary changes

* FIX Explicitly mention tsconfig file in webpack.config.js to avoid `error while parsing tsconfig.json, The 'files' list in config file 'tsconfig.json' is empty`
See (TypeStrong/ts-loader#405 (comment))

* FIX Move tsconfig to client subdirectory to make it accessible in docker container (only webpack.config.js is copied over from root folder in Dockerfile)

* TASK Move from ts-loader to babel to reduce compatibility issues between ES6/7 and typescript compilation.

* TASK Add types for classnames, hoist-non-react-statics and lodash. Fix default export of DashboardList and run prettier on eslintrc

* Run npm install

* Trigger tests

* Run npm install 2

* Trigger tests

Author: simonschneider-db

client/.babelrc

@@ -7,7 +7,8 @@
       ],
       "useBuiltIns": "usage"
     }],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",

client/.eslintrc.js

@@ -1,17 +1,40 @@
 module.exports = {
   root: true,
-  extends: ["react-app", "plugin:compat/recommended", "prettier"],
-  plugins: ["jest", "compat", "no-only-tests"],
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "react-app",
+    "plugin:compat/recommended",
+    "prettier",
+    // Remove any typescript-eslint rules that would conflict with prettier
+    "prettier/@typescript-eslint",
+  ],
+  plugins: ["jest", "compat", "no-only-tests", "@typescript-eslint"],
   settings: {
-    "import/resolver": "webpack"
+    "import/resolver": "webpack",
   },
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   rules: {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
     "jsx-a11y/anchor-is-valid": "off",
-  }
+  },
+  overrides: [
+    {
+      // Only run typescript-eslint on TS files
+      files: ["*.ts", "*.tsx", ".*.ts", ".*.tsx"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+      rules: {
+        // Do not require functions (especially react components) to have explicit returns
+        "@typescript-eslint/explicit-function-return-type": "off",
+        // Do not require to type every import from a JS file to speed up development
+        "@typescript-eslint/no-explicit-any": "off",
+        // Do not complain about useless contructors in declaration files
+        "no-useless-constructor": "off",
+        "@typescript-eslint/no-useless-constructor": "error",
+      },
+    },
+  ],
 };

client/app/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export interface EmptyStateProps {
+  header?: string;
+  icon?: string;
+  description: string;
+  illustration: string;
+  helpLink: string;
+
+  onboardingMode?: boolean;
+  showAlertStep?: boolean;
+  showDashboardStep?: boolean;
+  showInviteStep?: boolean;
+}
+
+declare const EmptyState: React.FunctionComponent<EmptyStateProps>;
+
+export default EmptyState;

client/app/pages/dashboards/components/DashboardListEmptyState.jsx renamed to client/app/pages/dashboards/components/DashboardListEmptyState.tsx

@@ -1,10 +1,16 @@
-import React from "react";
-import PropTypes from "prop-types";
+import * as React from "react";
+import * as PropTypes from "prop-types";
 import BigMessage from "@/components/BigMessage";
 import NoTaggedObjectsFound from "@/components/NoTaggedObjectsFound";
 import EmptyState from "@/components/empty-state/EmptyState";
 
-export default function DashboardListEmptyState({ page, searchTerm, selectedTags }) {
+export interface DashboardListEmptyStateProps {
+  page: string;
+  searchTerm: string;
+  selectedTags: string[];
+}
+
+export default function DashboardListEmptyState({ page, searchTerm, selectedTags }: DashboardListEmptyStateProps) {
   if (searchTerm !== "") {
     return <BigMessage message="Sorry, we couldn't find anything." icon="fa-search" />;
   }
@@ -30,5 +36,5 @@ export default function DashboardListEmptyState({ page, searchTerm, selectedTags
 DashboardListEmptyState.propTypes = {
   page: PropTypes.string.isRequired,
   searchTerm: PropTypes.string.isRequired,
-  selectedTags: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  selectedTags: PropTypes.array.isRequired,
 };

client/jsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    // Target latest version of ECMAScript.
+    "target": "esnext",
+    // Search under node_modules for non-relative imports.
+    "moduleResolution": "node",
+    // Process & infer types from .js files.
+    "allowJs": true,
+    // Don't emit; allow Babel to transform files.
+    "noEmit": true,
+    // Enable strictest settings like strictNullChecks & noImplicitAny.
+    "strict": true,
+    // Import non-ES modules as default imports.
+    "esModuleInterop": true,
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./app/*"]
+    }
+  },
+  "include": [
+    "app/**/*"
+  ],
+  "exclude": [
+    "dist"
+  ]
+}