diff --git a/Makefile b/Makefile
index 0030afdc..d80eb351 100644
--- a/Makefile
+++ b/Makefile
@@ -173,7 +173,7 @@ lint: .lint-go~ .lint-js~ ## Run linting
.lint-go~: $(shell $(LSFILES) '*.go' 2> /dev/null) | $(REVIVE) ; $(info $(M) running golint…)
$Q $(REVIVE) -formatter friendly -set_exit_status ./...
$Q touch $@
-.lint-js~: $(shell $(LSFILES) '*.js' '*.vue' '*.html' 2> /dev/null)
+.lint-js~: $(shell $(LSFILES) '*.js' '*.ts' '*.vue' '*.html' 2> /dev/null)
.lint-js~: $(GENERATED_JS) ; $(info $(M) running jslint…)
$Q cd console/frontend && npm run --silent lint
$Q touch $@
@@ -183,7 +183,7 @@ fmt: .fmt-go~ .fmt-js~ ## Format all source files
.fmt-go~: $(shell $(LSFILES) '*.go' 2> /dev/null) | $(GOIMPORTS) ; $(info $(M) formatting Go code…)
$Q $(GOIMPORTS) -local $(MODULE) -w $? < /dev/null
$Q touch $@
-.fmt-js~: $(shell $(LSFILES) '*.js' '*.vue' '*.html' 2> /dev/null)
+.fmt-js~: $(shell $(LSFILES) '*.js' '*.ts' '*.vue' '*.html' 2> /dev/null)
.fmt-js~: $(GENERATED_JS) ; $(info $(M) formatting JS code…)
$Q cd console/frontend && npm run --silent format
$Q touch $@
diff --git a/console/data/docs/99-changelog.md b/console/data/docs/99-changelog.md
index a86ff6ca..f747dca6 100644
--- a/console/data/docs/99-changelog.md
+++ b/console/data/docs/99-changelog.md
@@ -25,7 +25,8 @@ details.
- 🩹 *console*: use configured dimensions limit for “Visualize” tab
- 🌱 *inlet*: optimize BMP collector (see above)
- 🌱 *inlet*: replace LRU cache for classifiers by a time-based cache
-- 🌱 *console*: Ctrl-Enter or Cmd-Enter when editing a filter now applies the changes.
+- 🌱 *console*: Ctrl-Enter or Cmd-Enter when editing a filter now applies the changes
+- 🌱 *console*: switch to TypeScript for the frontend code
## 1.6.2 - 2022-11-03
diff --git a/console/frontend/.eslintrc.js b/console/frontend/.eslintrc.js
index 25938590..e5f4dc7f 100644
--- a/console/frontend/.eslintrc.js
+++ b/console/frontend/.eslintrc.js
@@ -9,7 +9,12 @@ module.exports = {
parserOptions: {
ecmaVersion: 2021,
},
- extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "prettier"],
+ extends: [
+ "plugin:vue/vue3-recommended",
+ "eslint:recommended",
+ "@vue/eslint-config-typescript",
+ "@vue/eslint-config-prettier",
+ ],
rules: {
"vue/no-unused-vars": "error",
"vue/no-v-html": "off",
diff --git a/console/frontend/env.d.ts b/console/frontend/env.d.ts
new file mode 100644
index 00000000..41b05018
--- /dev/null
+++ b/console/frontend/env.d.ts
@@ -0,0 +1,15 @@
+///
+
+// Missing types for vue-resizer
+declare module "vue-resizer" {
+ import type { DefineComponent } from "vue";
+ declare const ResizeRow: DefineComponent<{
+ sliderWidth?: number;
+ height?: number;
+ width?: number | "auto";
+ sliderColor?: string;
+ sliderBgColor?: string;
+ sliderHoverColor?: string;
+ sliderBgHoverColor?: string;
+ }>;
+}
diff --git a/console/frontend/index.html b/console/frontend/index.html
index f62262b7..d0be7db3 100644
--- a/console/frontend/index.html
+++ b/console/frontend/index.html
@@ -10,6 +10,6 @@
class="h-full bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100"
>
-
+