diff --git a/src/options/elements/options-editor/add-language-dialog.js b/src/options/elements/options-editor/add-language-dialog.ts
similarity index 72%
rename from src/options/elements/options-editor/add-language-dialog.js
rename to src/options/elements/options-editor/add-language-dialog.ts
index 4cfd711..155d4e5 100644
--- a/src/options/elements/options-editor/add-language-dialog.js
+++ b/src/options/elements/options-editor/add-language-dialog.ts
@@ -1,23 +1,30 @@
 import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
-import {isoLangs} from '../../../common/consts';
+import {IsoLang, isoLangs} from '../../../common/consts';
 import {msg} from '../../../common/i18n';
+import {TargetLangs} from '../../../common/options';
 import {DIALOG_STYLES} from '../../shared/dialog-styles';
 import {SHARED_STYLES} from '../../shared/shared-styles';
 
+interface IsoLangWCode extends IsoLang {
+  code: string;
+}
+
 const ALL_LANGUAGES =
     Object.entries(isoLangs)
         .map(entry => {
-          let lang = entry[1];
-          lang.code = entry[0];
+          const lang: IsoLangWCode = Object.assign(entry[1], {code: entry[0]});
           return lang;
         })
         .sort((a, b) => a.name < b.name ? -1 : (a.name > b.name ? 1 : 0));
 
-export class AddLanguageDialog extends LitElement {
+@customElement('add-language-dialog')
+export default class AddLanguageDialog extends LitElement {
   static properties = {
     languages: {type: Object},
   };
+  @property({type: Object}) languages: TargetLangs;
 
   static get styles() {
     return [
@@ -51,8 +58,8 @@
   }
 
   render() {
-    let languageCodes = Object.values(this.languages ?? {});
-    let languages = ALL_LANGUAGES
+    const languageCodes = Object.values(this.languages ?? {});
+    const languages = ALL_LANGUAGES
                         .filter(lang => {
                           return !languageCodes.includes(lang.code);
                         })
@@ -88,7 +95,7 @@
   }
 
   showDialog() {
-    let dialog = this.renderRoot.querySelector('dialog');
+    const dialog = this.renderRoot.querySelector('dialog');
     dialog.showModal();
   }
 
@@ -97,16 +104,15 @@
   }
 
   addLanguage() {
-    let languageCodes = Object.values(this.languages ?? {});
-    let select = this.renderRoot.querySelector('#select_language');
+    const languageCodes = Object.values(this.languages ?? {});
+    const select = this.renderRoot.querySelector('#select_language') as HTMLSelectElement;
 
-    let newLang = select.value;
+    const newLang = select.value;
     languageCodes.push(newLang);
-    let translateinto = Object.assign({}, languageCodes);
+    const translateinto = Object.assign({}, languageCodes);
     chrome.storage.sync.set({translateinto}, () => {
       select.selectedIndex = 0;
       this.closeDialog();
     });
   }
 }
-customElements.define('add-language-dialog', AddLanguageDialog);
diff --git a/src/options/elements/options-editor/languages-editor.js b/src/options/elements/options-editor/languages-editor.ts
similarity index 83%
rename from src/options/elements/options-editor/languages-editor.js
rename to src/options/elements/options-editor/languages-editor.ts
index 76d9967..64c3f84 100644
--- a/src/options/elements/options-editor/languages-editor.js
+++ b/src/options/elements/options-editor/languages-editor.ts
@@ -1,16 +1,17 @@
+import './add-language-dialog';
+
 import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 import {map} from 'lit/directives/map.js';
 
 import {isoLangs} from '../../../common/consts';
 import {msg} from '../../../common/i18n';
+import {TargetLangs} from '../../../common/options';
 import {SHARED_STYLES} from '../../shared/shared-styles';
 
-import AddLanguageDialog from './add-language-dialog';
-
-export class LanguagesEditor extends LitElement {
-  static properties = {
-    languages: {type: Object},
-  };
+@customElement('languages-editor')
+export default class LanguagesEditor extends LitElement {
+  @property({type: Object}) languages: TargetLangs;
 
   static get styles() {
     return [
@@ -84,16 +85,10 @@
     ];
   }
 
-  constructor() {
-    super();
-    this.addEventListener('show-credits-dialog', this.showDialog);
-    this.sortable = undefined;
-  }
-
   render() {
-    let languageCodes = Object.values(this.languages ?? {});
-    let languageList = map(languageCodes, (lang, i) => {
-      let moveBtns = [];
+    const languageCodes = Object.values(this.languages ?? {});
+    const languageList = map(languageCodes, (lang, i) => {
+      const moveBtns = [];
       if (i != 0) {
         moveBtns.push(html`
           <button
@@ -160,29 +155,28 @@
     this.renderRoot.querySelector('add-language-dialog').dispatchEvent(e);
   }
 
-  save(languageCodes) {
-    let translateinto = Object.assign({}, languageCodes);
+  save(languageCodes: string[]) {
+    const translateinto = Object.assign({}, languageCodes);
     chrome.storage.sync.set({translateinto});
   }
 
-  deleteLanguage(deleteLang) {
-    let languageCodes =
+  deleteLanguage(deleteLang: string) {
+    const languageCodes =
         Object.values(this.languages ?? {}).filter(lang => lang != deleteLang);
     this.save(languageCodes);
   }
 
-  swapLanguages(i, j) {
-    let languageCodes = Object.values(this.languages ?? {});
+  swapLanguages(i: number, j: number) {
+    const languageCodes = Object.values(this.languages ?? {});
     if (i >= languageCodes.length || j >= languageCodes.length || i < 0 ||
         j < 0) {
       console.error(
           'Can\'t swap languages because the indexes are out of the range.');
       return;
     }
-    let tmp = languageCodes[j];
+    const tmp = languageCodes[j];
     languageCodes[j] = languageCodes[i];
     languageCodes[i] = tmp;
     this.save(languageCodes);
   }
 }
-customElements.define('languages-editor', LanguagesEditor);
diff --git a/src/options/elements/options-editor/options-editor.js b/src/options/elements/options-editor/options-editor.ts
similarity index 67%
rename from src/options/elements/options-editor/options-editor.js
rename to src/options/elements/options-editor/options-editor.ts
index a26072e..2d0422e 100644
--- a/src/options/elements/options-editor/options-editor.js
+++ b/src/options/elements/options-editor/options-editor.ts
@@ -1,16 +1,16 @@
+import './languages-editor';
+
 import {css, html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 import {map} from 'lit/directives/map.js';
 
 import {msg} from '../../../common/i18n';
-import {TAB_OPTIONS} from '../../../common/options';
+import {OptionsV0, TAB_OPTIONS, TabOptionValue} from '../../../common/options';
 import {SHARED_STYLES} from '../../shared/shared-styles';
 
-import LanguagesEditor from './languages-editor';
-
-export class OptionsEditor extends LitElement {
-  static properties = {
-    storageData: {type: Object},
-  };
+@customElement('options-editor')
+export default class OptionsEditor extends LitElement {
+  @property({type: Object}) storageData: OptionsV0;
 
   static get styles() {
     return [
@@ -24,16 +24,11 @@
     ];
   }
 
-  constructor() {
-    super();
-    this.addEventListener('show-credits-dialog', this.showDialog);
-  }
-
   render() {
-    let currentTabOption = this.storageData?.uniquetab;
+    const currentTabOption = this.storageData?.uniquetab;
 
-    let otherOptions = map(TAB_OPTIONS, (option, i) => {
-      let checked = option.value == currentTabOption ||
+    const otherOptions = map(TAB_OPTIONS, (option, i) => {
+      const checked = option.value == currentTabOption ||
           option.deprecatedValues.includes(currentTabOption);
       return html`
             <p>
@@ -56,10 +51,9 @@
     `;
   }
 
-  changeTabOption(value) {
+  changeTabOption(value: TabOptionValue) {
     chrome.storage.sync.set({uniquetab: value}, function() {
       chrome.runtime.sendMessage({action: 'clearTranslatorTab'});
     });
   }
 }
-customElements.define('options-editor', OptionsEditor);