Merge pull request #467 from nimiq/soeren/ts-update

Upgrade Typescript to v5
nimiq · Sep 9, 2024 · 4e68e59 · 4e68e59
2 parents 070a5b9 + d4101cb
commit 4e68e59
Show file tree

Hide file tree

Showing 88 changed files with 608 additions and 732 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/client/package.json b/client/package.json
@@ -33,6 +33,6 @@
   "devDependencies": {
     "rollup": "^0.64.0",
     "tslint": "^5.11.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.5.4"
   }
 }
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -2865,10 +2865,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.9.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 ultron@~1.1.0:
   version "1.1.1"

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build:bitcoinjs": "yarn --silent browserify tools/bitcoinjs-parts.js -s BitcoinJS | yarn terser --compress --mangle --source-map --output src/lib/bitcoin/BitcoinJS.js",
     "build:opengsn": "yarn --silent browserify -r @opengsn/common/dist/EIP712/TypedRequestData -s OpenGSN | yarn terser --compress --mangle --source-map --output src/lib/polygon/OpenGSN.js",
     "test": "karma start",
-    "typecheck": "node tools/typescriptCompatibilityFix.js && tsc",
+    "typecheck": "tsc && tsc -p src/service-worker/tsconfig.json",
     "lint": "yarn i18n:build-dictionary && eslint src tools && if ( grep 'fit\\|fdescribe' tests/lib/* ); then exit 1; else exit 0; fi",
     "lintfix": "eslint --fix src tools",
     "checkdeps": "node tools/dependencyValidator.js",
@@ -60,6 +60,6 @@
     "karma-jasmine": "^1.1.2",
     "terser": "^5.14.2",
     "tsc-watch": "^1.0.22",
-    "typescript": "^3.5.0"
+    "typescript": "5.4"
   }
 }
diff --git a/src/common.js b/src/common.js
@@ -88,8 +88,7 @@ async function runKeyguard(RequestApiClass, opts) { // eslint-disable-line no-un
 
     // Back arrow functionality
     document.body.addEventListener('click', event => {
-        // @ts-ignore (Property 'matches' does not exist on type 'EventTarget'.)
-        if (!event.target || !event.target.matches('a.page-header-back-button')) return;
+        if (!(event.target instanceof HTMLElement) || !event.target.matches('a.page-header-back-button')) return;
         window.history.back();
     });
 
@@ -125,7 +124,7 @@ async function runKeyguard(RequestApiClass, opts) { // eslint-disable-line no-un
     window.rpcServer = new RpcServer(CONFIG.ALLOWED_ORIGIN);
 
     options.whitelist.forEach(/** @param {string} method */ method => {
-        // @ts-ignore (Element implicitly has an 'any' type because type 'TopLevelApi' has no index signature.)
+        // @ts-expect-error (Element implicitly has an 'any' type because type 'TopLevelApi' has no index signature.)
         window.rpcServer.onRequest(method, api[method].bind(api));
     });
 

diff --git a/src/components/AddressInfo.js b/src/components/AddressInfo.js
@@ -14,8 +14,9 @@ class AddressInfo { // eslint-disable-line no-unused-vars
 
     /**
      * Inserts this AddressInfo into $el overwriting the original content of $el.
-     * @param {HTMLElement} $el
+     * @param {?HTMLElement} [$el]
      * @param {boolean} [isDetailedView = false]
+     * @returns {HTMLElement}
      */
     renderTo($el, isDetailedView = false) {
         $el = $el || document.createElement('div');
@@ -94,5 +95,7 @@ class AddressInfo { // eslint-disable-line no-unused-vars
             const copyableAddress = new Copyable(this._addressInfo.userFriendlyAddress, $address);
             $el.appendChild(copyableAddress.getElement());
         }
+
+        return $el;
     }
 }
diff --git a/src/components/BalanceDistributionBar.js b/src/components/BalanceDistributionBar.js
@@ -15,7 +15,7 @@ class BalanceDistributionBar { // eslint-disable-line no-unused-vars
      *  leftFiatRate: number,
      *  rightFiatRate: number,
      * }} settings
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor(settings, $el) {
         this.$el = BalanceDistributionBar._createElement($el);
@@ -74,7 +74,7 @@ class BalanceDistributionBar { // eslint-disable-line no-unused-vars
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/Copyable.js b/src/components/Copyable.js
@@ -4,7 +4,7 @@
 class Copyable {
     /**
      * @param {string} text
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor(text, $el) {
         this._text = text;
@@ -37,7 +37,7 @@ class Copyable {
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/DownloadLoginFile.js b/src/components/DownloadLoginFile.js
@@ -9,7 +9,7 @@
 
 class DownloadLoginFile extends Nimiq.Observable {
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor($el) {
         super();
@@ -19,20 +19,11 @@ class DownloadLoginFile extends Nimiq.Observable {
         /** @type {LoginFile | null} */
         this._file = null;
 
-        /** @type {HTMLImageElement} */
-        this.$loginfile = (this.$el.querySelector('.loginfile'));
-
-        /** @type {HTMLAnchorElement} */
-        this.$loginfileLink = (this.$el.querySelector('.loginfile-link'));
-
-        /** @type {HTMLAnchorElement} */
-        this.$downloadButton = (this.$el.querySelector('.download-button'));
-
-        /** @type {HTMLButtonElement} */
-        this.$continueButton = (this.$el.querySelector('.continue'));
-
-        /** @type {SVGElement} */
-        this.$longTouchIndicator = (this.$el.querySelector('.long-touch-indicator'));
+        this.$loginfile = /** @type {HTMLImageElement} */ (this.$el.querySelector('.loginfile'));
+        this.$loginfileLink = /** @type {HTMLAnchorElement} */ (this.$el.querySelector('.loginfile-link'));
+        this.$downloadButton = /** @type {HTMLAnchorElement} */ (this.$el.querySelector('.download-button'));
+        this.$continueButton = /** @type {HTMLButtonElement} */ (this.$el.querySelector('.continue'));
+        this.$longTouchIndicator = /** @type {SVGElement} */ (this.$el.querySelector('.long-touch-indicator'));
 
         this.$loginfile.addEventListener('mousedown', e => this._onMouseDown(e));
         this.$loginfile.addEventListener('touchstart', () => this._onTouchStart());
@@ -159,8 +150,7 @@ class DownloadLoginFile extends Nimiq.Observable {
      * @param {MouseEvent} event
      */
     _onMouseDown(event) {
-        /** @type {HTMLElement} */
-        const target = (event.target);
+        const target = /** @type {HTMLElement} */ (event.target);
         // Clicks on the continue or download buttons are already covered by a 'click' handler.
         if (target.matches('.continue') || target.matches('.download-button')) return;
 

diff --git a/src/components/FileImporter.js b/src/components/FileImporter.js
@@ -38,18 +38,16 @@ class FileImporter extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLLabelElement} [$el]
+     * @param {?HTMLLabelElement} [$el]
      * @param {boolean} [displayFile = true]
      */
     constructor($el, displayFile = true) {
         super();
         this.$el = FileImporter._createElement($el);
         this._displayFile = displayFile;
 
-        /** @type {HTMLElement} */
-        this.$errorMessage = (this.$el.querySelector('.error-message'));
-        /** @type {HTMLInputElement} */
-        this.$fileInput = (this.$el.querySelector('input'));
+        this.$errorMessage = /** @type {HTMLElement} */ (this.$el.querySelector('.error-message'));
+        this.$fileInput = /** @type {HTMLInputElement} */ (this.$el.querySelector('input'));
 
         // Add drag-and-drop handlers
         this.$el.addEventListener('dragover', this._onDragOver.bind(this));
@@ -65,7 +63,7 @@ class FileImporter extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLLabelElement} [$el]
+     * @param {?HTMLLabelElement} [$el]
      * @returns {HTMLLabelElement}
      */
     static _createElement($el) {
@@ -96,8 +94,7 @@ class FileImporter extends Nimiq.Observable {
      * @param {Event} event
      */
     _onFileSelected(event) {
-        /** @type {HTMLInputElement} */
-        const eventTarget = (event.target);
+        const eventTarget = /** @type {HTMLInputElement} */ (event.target);
         if (!eventTarget.files || !eventTarget.files.length) return;
         this._handleFile(eventTarget.files[0]);
     }

diff --git a/src/components/FlippableHandler.js b/src/components/FlippableHandler.js
@@ -6,8 +6,7 @@ class FlippableHandler {
      */
     static init(classname = 'flipped') {
         if (!FlippableHandler.flippableHandlerInitialised) {
-            /** @type {HTMLElement} */
-            const $rotationContainer = (document.getElementById('rotation-container'));
+            const $rotationContainer = /** @type {HTMLElement} */ (document.getElementById('rotation-container'));
             if (window.location.hash) {
                 const $page = document.querySelector(window.location.hash);
                 if ($page) {
@@ -68,8 +67,7 @@ class FlippableHandler {
      *  Must be a child of `#rotation-container`
      */
     static _updateContainerHeight($enforcedElement) {
-        /** @type {HTMLElement} */
-        const $rotationContainer = (document.getElementById('rotation-container'));
+        const $rotationContainer = /** @type {HTMLElement} */ (document.getElementById('rotation-container'));
         if ($enforcedElement && $rotationContainer.contains($enforcedElement)) {
             $rotationContainer.style.height = `${$enforcedElement.clientHeight}px`;
         } else {

diff --git a/src/components/Identicon.js b/src/components/Identicon.js
@@ -3,15 +3,14 @@
 class Identicon { // eslint-disable-line no-unused-vars
     /**
      * @param {string} [address]
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor(address, $el) {
         this._address = address;
 
         this.$el = Identicon._createElement($el);
 
-        /** @type {HTMLImageElement} */
-        this.$imgEl = (this.$el.firstChild);
+        this.$imgEl = /** @type {HTMLImageElement} */ (this.$el.firstChild);
 
         this._updateIqon();
     }
@@ -32,7 +31,7 @@ class Identicon { // eslint-disable-line no-unused-vars
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/LanguagePicker.js b/src/components/LanguagePicker.js
@@ -2,15 +2,15 @@
 
 class LanguagePicker { // eslint-disable-line no-unused-vars
     /**
-     * @param {HTMLSelectElement} [$el]
+     * @param {?HTMLSelectElement} [$el]
      */
     constructor($el) {
         this.$el = $el || LanguagePicker._createElement($el);
     }
 
     /**
      * Produces a select element that the user can chose an available language from.
-     * @param {HTMLSelectElement} [$el]
+     * @param {?HTMLSelectElement} [$el]
      * @returns {HTMLSelectElement}
      */
     static _createElement($el) {

diff --git a/src/components/LoginFileAnimation.js b/src/components/LoginFileAnimation.js
@@ -3,14 +3,13 @@
 
 class LoginFileAnimation {
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor($el) {
         this._color = 0;
         this.$el = LoginFileAnimation._createElement($el);
 
-        /** @type {HTMLDivElement} */
-        this.$background = (this.$el.querySelector('.background'));
+        this.$background = /** @type {HTMLDivElement} */ (this.$el.querySelector('.background'));
     }
 
     /**
@@ -59,7 +58,7 @@ class LoginFileAnimation {
     }
 
     /**
-     * @param {HTMLDivElement} [$el]
+     * @param {?HTMLDivElement} [$el]
      * @returns {HTMLDivElement}
      */
     static _createElement($el) {

diff --git a/src/components/LoginFileIcon.js b/src/components/LoginFileIcon.js
@@ -3,7 +3,7 @@
 class LoginFileIcon { // eslint-disable-line no-unused-vars
     /**
      *
-     * @param {HTMLDivElement?} [$el]
+     * @param {?HTMLDivElement} [$el]
      */
     constructor($el) {
         this.colorClass = '';

diff --git a/src/components/PasswordBox.js b/src/components/PasswordBox.js
@@ -19,7 +19,7 @@
 class PasswordBox extends Nimiq.Observable {
     // eslint-disable-next-line valid-jsdoc
     /**
-     * @param {HTMLFormElement} [$el]
+     * @param {?HTMLFormElement} [$el]
      * @param {Partial<PasswordBoxOptions>} [options]
      */
     constructor($el, options = {}) {
@@ -41,7 +41,7 @@ class PasswordBox extends Nimiq.Observable {
 
         this.$el.classList.toggle('hide-input', this.options.hideInput);
 
-        this._passwordInput = new PasswordInput(this.$el.querySelector('[password-input]'));
+        this._passwordInput = new PasswordInput(/** @type {HTMLElement} */(this.$el.querySelector('[password-input]')));
         this._passwordInput.on(PasswordInput.Events.VALID, isValid => this._onInputChangeValidity(isValid));
 
         this.setMinLength(this.options.minLength);
@@ -60,7 +60,7 @@ class PasswordBox extends Nimiq.Observable {
     }
 
     /**
-     * @param {HTMLFormElement} [$el]
+     * @param {?HTMLFormElement | undefined} $el
      * @param {PasswordBoxOptions} options
      * @returns {HTMLFormElement}
      */
@@ -116,8 +116,7 @@ class PasswordBox extends Nimiq.Observable {
         `;
         /* eslint-enable max-len */
 
-        /** @type {HTMLButtonElement} */
-        const submitButton = ($el.querySelector('button.submit'));
+        const submitButton = /** @type {HTMLButtonElement} */ ($el.querySelector('button.submit'));
         submitButton.classList.add('nq-button', options.bgColor);
         submitButton.classList.toggle('inverse', !options.hideInput);
 

diff --git a/src/components/PasswordInput.js b/src/components/PasswordInput.js
@@ -5,10 +5,10 @@
 
 class PasswordInput extends Nimiq.Observable {
     /**
-     * @param {?HTMLElement} $el
+     * @param {?HTMLElement} [$el]
      * @param {object} [options]
-     * @param {number=} [options.maxLength = Infinity]
-     * @param {string=} [options.placeholder = '••••••••']
+     * @param {number} [options.maxLength = Infinity]
+     * @param {string} [options.placeholder = '••••••••']
      * @param {'current-password' | 'new-password' | undefined} [options.autocomplete = 'current-password']
      */
     constructor($el, options = {}) {

diff --git a/src/components/PasswordSetterBox.js b/src/components/PasswordSetterBox.js
@@ -8,7 +8,7 @@
 class PasswordSetterBox extends Nimiq.Observable {
     // eslint-disable-next-line valid-jsdoc
     /**
-     * @param {?HTMLFormElement} $el
+     * @param {?HTMLFormElement} [$el]
      * @param {{bgColor?: string, buttonI18nTag?: string}} [options]
      */
     constructor($el, options = {}) {
@@ -27,7 +27,7 @@ class PasswordSetterBox extends Nimiq.Observable {
         this.$el = PasswordSetterBox._createElement($el, this.options);
 
         this._passwordInput = new PasswordInput(
-            this.$el.querySelector('[password-input]'),
+            /** @type {HTMLElement} */ (this.$el.querySelector('[password-input]')),
             {
                 maxLength: PasswordSetterBox.PASSWORD_MAX_LENGTH,
                 autocomplete: 'new-password',
@@ -52,7 +52,7 @@ class PasswordSetterBox extends Nimiq.Observable {
     }
 
     /**
-     * @param {?HTMLFormElement} [$el]
+     * @param {?HTMLFormElement | undefined} $el
      * @param {{bgColor: string, buttonI18nTag: string}} options
      * @returns {HTMLFormElement}
      */