diff --git a/src/public/app/widgets/type_widgets/options/text_notes/editor.js b/src/public/app/widgets/type_widgets/options/text_notes/editor.ts
similarity index 89%
rename from src/public/app/widgets/type_widgets/options/text_notes/editor.js
rename to src/public/app/widgets/type_widgets/options/text_notes/editor.ts
index 84cdb047c..e51285df1 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/editor.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/editor.ts
@@ -1,3 +1,4 @@
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 import { t } from "../../../../services/i18n.js";
 import utils from "../../../../services/utils.js";
 import OptionsWidget from "../options_widget.js";
@@ -5,7 +6,7 @@ import OptionsWidget from "../options_widget.js";
 const TPL = `
 <div class="options-section formatting-toolbar">
     <h4>${t("editing.editor_type.label")}</h4>
-    
+
     <div>
         <label>
             <input type="radio" name="editor-type" value="ckeditor-balloon" />
@@ -39,6 +40,10 @@ const TPL = `
 `;
 
 export default class EditorOptions extends OptionsWidget {
+
+    private $body!: JQuery<HTMLElement>;
+    private $multilineToolbarCheckbox!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$body = $("body");
@@ -52,7 +57,7 @@ export default class EditorOptions extends OptionsWidget {
         this.$multilineToolbarCheckbox.on("change", () => this.updateCheckboxOption("textNoteEditorMultilineToolbar", this.$multilineToolbarCheckbox));
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         this.$widget.find(`input[name="editor-type"][value="${options.textNoteEditorType}"]`).prop("checked", "true");
         this.setCheckboxState(this.$multilineToolbarCheckbox, options.textNoteEditorMultilineToolbar);
     }
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/heading_style.js b/src/public/app/widgets/type_widgets/options/text_notes/heading_style.ts
similarity index 78%
rename from src/public/app/widgets/type_widgets/options/text_notes/heading_style.js
rename to src/public/app/widgets/type_widgets/options/text_notes/heading_style.ts
index a2ad013a4..828946544 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/heading_style.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/heading_style.ts
@@ -1,10 +1,11 @@
 import OptionsWidget from "../options_widget.js";
 import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
     <h4>${t("heading_style.title")}</h4>
-    
+
     <select class="heading-style form-select">
         <option value="plain">${t("heading_style.plain")}</option>
         <option value="underline">${t("heading_style.underline")}</option>
@@ -13,12 +14,16 @@ const TPL = `
 </div>`;
 
 export default class HeadingStyleOptions extends OptionsWidget {
+
+    private $body!: JQuery<HTMLElement>;
+    private $headingStyle!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$body = $("body");
         this.$headingStyle = this.$widget.find(".heading-style");
         this.$headingStyle.on("change", () => {
-            const newHeadingStyle = this.$headingStyle.val();
+            const newHeadingStyle = String(this.$headingStyle.val());
 
             this.toggleBodyClass("heading-style-", newHeadingStyle);
 
@@ -26,11 +31,11 @@ export default class HeadingStyleOptions extends OptionsWidget {
         });
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         this.$headingStyle.val(options.headingStyle);
     }
 
-    toggleBodyClass(prefix, value) {
+    toggleBodyClass(prefix: string, value: string) {
         for (const clazz of Array.from(this.$body[0].classList)) {
             // create copy to safely iterate over while removing classes
             if (clazz.startsWith(prefix)) {
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js b/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.ts
similarity index 89%
rename from src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js
rename to src/public/app/widgets/type_widgets/options/text_notes/highlights_list.ts
index 532aca4e5..d5554c875 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/highlights_list.ts
@@ -1,5 +1,6 @@
 import OptionsWidget from "../options_widget.js";
 import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
@@ -20,11 +21,14 @@ const TPL = `
     <h5>${t("highlights_list.visibility_title")}</h5>
 
     <p>${t("highlights_list.visibility_description")}</p>
-    
+
     <p>${t("highlights_list.shortcut_info")}</p>
 </div>`;
 
 export default class HighlightsListOptions extends OptionsWidget {
+
+    private $hlt!: JQuery<HTMLInputElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$hlt = this.$widget.find("input.highlights-list-check");
@@ -32,14 +36,14 @@ export default class HighlightsListOptions extends OptionsWidget {
             const hltVals = this.$widget
                 .find('input.highlights-list-check[type="checkbox"]:checked')
                 .map(function () {
-                    return this.value;
+                    return (this as HTMLInputElement).value;
                 })
                 .get();
             this.updateOption("highlightsList", JSON.stringify(hltVals));
         });
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         const hltVals = JSON.parse(options.highlightsList);
         this.$widget.find('input.highlights-list-check[type="checkbox"]').each(function () {
             if ($.inArray($(this).val(), hltVals) !== -1) {
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js b/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
similarity index 83%
rename from src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js
rename to src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
index dd9cc4a88..8e88f7b4b 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
@@ -1,29 +1,33 @@
 import OptionsWidget from "../options_widget.js";
 import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
     <h4>${t("table_of_contents.title")}</h4>
-    
+
     ${t("table_of_contents.description")}
-    
+
     <div class="form-group">
         <input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
     </div>
-    
+
     <p>${t("table_of_contents.disable_info")}</p>
-    
+
     <p>${t("table_of_contents.shortcut_info")}</p>
 </div>`;
 
 export default class TableOfContentsOptions extends OptionsWidget {
+
+    private $minTocHeadings!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$minTocHeadings = this.$widget.find(".min-toc-headings");
         this.$minTocHeadings.on("change", () => this.updateOption("minTocHeadings", this.$minTocHeadings.val()));
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         this.$minTocHeadings.val(options.minTocHeadings);
     }
 }
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
similarity index 83%
rename from src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
rename to src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
index b620bbdaa..fdf0877c2 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
@@ -1,5 +1,6 @@
 import OptionsWidget from "../options_widget.js";
 import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
 
 const TPL = `
 <div class="options-section">
@@ -14,13 +15,16 @@ const TPL = `
 </div>`;
 
 export default class TextAutoReadOnlySizeOptions extends OptionsWidget {
+
+    private $autoReadonlySizeText!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
         this.$autoReadonlySizeText = this.$widget.find(".auto-readonly-size-text");
         this.$autoReadonlySizeText.on("change", () => this.updateOption("autoReadonlySizeText", this.$autoReadonlySizeText.val()));
     }
 
-    async optionsLoaded(options) {
+    async optionsLoaded(options: OptionMap) {
         this.$autoReadonlySizeText.val(options.autoReadonlySizeText);
     }
 }