Typescript migration

.travis.yml

@@ -52,6 +52,9 @@ script:
   # priprav Django aplikaci
   - source scripts/shell/release_tasks.sh
 
+  # otestuj typy ve frontendu pres TS kompilator
+  - yarn run types
+
   # proved testy a spocitej pokryti kodu
   - coverage run -a manage.py test
   - coverage run -a manage.py behave --stage=api --format=progress3

Pipfile

@@ -15,7 +15,7 @@ gunicorn = "~=20.0.2"
 "psycopg2-binary" = "~=2.8.2"
 pyjwt = "~=1.7.1"
 pyyaml = "~=5.3.0"
-requests = "~=2.22.0"
+requests = "~=2.23.0"
 sentry-sdk = "~=0.14.0"
 uritemplate = "~=3.0.0"
 vulture = "~=1.2"
@@ -25,7 +25,7 @@ whitenoise = "~=5.0"
 behave-django = "~=1.3.0"
 black = "~=19.3b0"
 coverage = "~=5.0.3"
-codecov = "~=2.0.15"
+codecov = "~=2.0.16"
 selenium = "~=3.141.0"
 
 [requires]

README.md

@@ -87,18 +87,18 @@ Aplikace umožňuje **pokročilé debugování** na lokálním i vzdáleném pro
 Pro **eliminaci mrtvého kódu** se také používá **[vulture](https://github.com/jendrikseipp/vulture/)**.
 
 #### Frontend
-Responzivní JS *(ES2018)* webová aplikace typu SPA ([Single-Page-App](https://en.wikipedia.org/wiki/Single-page_application)) postavená na těchto technologiích:
+Responzivní JS *([Typescript](https://www.typescriptlang.org/))* webová aplikace typu SPA ([Single-Page-App](https://en.wikipedia.org/wiki/Single-page_application)) postavená na těchto technologiích:
 * [React 16](https://reactjs.org/),
 * [Bootstrap 4](https://getbootstrap.com/) (s [Reactstrap](https://reactstrap.github.io/)em),
 * [React Router 5](https://reacttraining.com/react-router/),
 * [FontAwesome 5 PRO](https://fontawesome.com/)
 * [a další...](/frontend/package.json)
 
 Vývoj frontendu je postaven především na:
-* [Webpack](https://webpack.js.org/) s vlastní konfigurací (lokální i produkční) + [Webpack DevServer](https://webpack.js.org/configuration/dev-server/),
-* [Babel](https://babeljs.io/),
-* [Flow](https://flow.org/) – pro statickou typovou kontrolu,
-* [ESlint](https://eslint.org/) – linter pro statickou analýzu kódu
+* [Webpack 4](https://webpack.js.org/) s vlastní konfigurací (lokální i produkční) + [Webpack DevServer](https://webpack.js.org/configuration/dev-server/),
+* [Babel 7](https://babeljs.io/),
+* [Typescript 3.8](https://www.typescriptlang.org/) – pro statickou typovou kontrolu,
+* [ESlint 6](https://eslint.org/) – linter pro statickou analýzu kódu
 * a [React Hot Loader](https://github.com/gaearon/react-hot-loader) – pro [HMR](https://webpack.js.org/guides/hot-module-replacement/).
 
 Aplikace je **odolná proti pádům JS** díky **[React Error Boundaries](https://reactjs.org/docs/error-boundaries.html)**.

api/services.py

@@ -10,6 +10,8 @@
 class Bank:
     """
     Zprostředkovává komunikaci s Fio API pro získání seznamu posledních transakcí.
+    Postaveno na Fio API v1.6.21 (13. 2. 2020).
+    Dokumentace Fio API: https://www.fio.cz/docs/cz/API_Bankovnictvi.pdf
     """
 
     # URL adresa API Fio banky

frontend/.babelrc.json

@@ -1,5 +1,5 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-flow"],
+    "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
     "plugins": [
         "react-hot-loader/babel",
         [

frontend/.eslintrc.js

@@ -3,7 +3,7 @@ const restrictedGlobals = require("confusing-browser-globals")
 // castecne vychazi z: https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js
 module.exports = {
     root: true,
-    parser: "babel-eslint",
+    parser: "@typescript-eslint/parser",
     env: {
         browser: true,
         node: true,
@@ -13,36 +13,74 @@ module.exports = {
         Atomics: "readonly",
         SharedArrayBuffer: "readonly"
     },
+    ignorePatterns: ["webpack.config.js"],
     parserOptions: {
         ecmaFeatures: {
             jsx: true
         },
         ecmaVersion: 2018,
-        sourceType: "module"
+        sourceType: "module",
+
+        // nastaveni potrebna pro type-aware typescript-eslint
+        // viz https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md
+        tsconfigRootDir: __dirname,
+        project: "./tsconfig.json"
     },
-    plugins: ["import", "flowtype", "jsx-a11y", "react", "react-hooks", "prettier"],
+    plugins: ["import", "jsx-a11y", "react", "react-hooks", "prettier", "@typescript-eslint"],
     settings: {
         react: {
             version: "detect"
-        }
+        },
+        // resolver eslint-import-resolver-typescript zaridi spravne chovani k @types
+        // viz https://github.com/benmosher/eslint-plugin-import/issues/1341
+        "import/resolver": {
+            typescript: { alwaysTryTypes: true }
+        },
+        // kvuli false positives "ESLint: 'contrast' not found in imported namespace 'chroma'.(import/namespace)"
+        "import/ignore": ["chroma"]
     },
     extends: [
         "eslint:recommended",
+
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        // pravidla zahrnujici typy
+        // viz https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+
         "plugin:react/recommended",
+
         "plugin:import/errors",
         "plugin:import/warnings",
+        "plugin:import/typescript",
+
         "plugin:jsx-a11y/recommended",
-        "plugin:flowtype/recommended",
+
         "plugin:prettier/recommended",
+        "prettier/@typescript-eslint",
         "prettier/babel",
-        "prettier/flowtype",
         "prettier/react"
     ],
     rules: {
         "react/prop-types": 0,
+
         "no-restricted-globals": ["error"].concat(restrictedGlobals),
+        // zakaz console.log
+        "no-console": ["error", { allow: ["warn", "debug", "error", "info"] }],
+
         "jsx-a11y/no-autofocus": 0,
+
         "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "warn"
+        "react-hooks/exhaustive-deps": "warn",
+
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/no-use-before-define": ["error", { functions: false }],
+
+        // vlastni pravidla camelCase, viz https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/camelcase.md
+        camelcase: "off",
+        // deaktivace pro properties kvuli DRF API
+        "@typescript-eslint/camelcase": ["warn", { properties: "never" }],
+
+        "import/namespace": [2, { allowComputed: true }]
     }
 }