Add shorthand ambient module definition for 'govuk-frontend'

As govuk-frontend provides no types, TypeScript will type its exports as `any`, but be unable to acknowledge fields inherited from parent classes leading to errors when trying to assign or use them. TypeScript's shorthand ambient modules seem to also make inherited fields typed as `any`. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#shorthand-ambient-module-declarations This will be overridden by any other definition of the `govuk-frontend` module, either in another `.d.ts` file or in `@types/govuk-frontend`. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#untyped-imports
alphagov · Oct 10, 2024 · 3b110db · 3b110db
1 parent 67da5a1
commit 3b110db
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 120 deletions.
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,13 @@
+/**  
+ * As govuk-frontend provides no types, TypeScript will type its exports as `any`,
+ * but be unable to acknowledge fields inherited from parent classes  
+ * leading to errors when trying to assign or use them.  
+ * 
+ * TypeScript's shorthand ambient modules seem to also make inherited fields typed as `any`.
+ * https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#shorthand-ambient-module-declarations
+ * 
+ * This will be overridden by any other definition of the `govuk-frontend` module, either in another `.d.ts` file
+ * or in `@types/govuk-frontend`.
+ * https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#untyped-imports
+ */
+declare module "govuk-frontend";
diff --git a/src/javascripts/components/back-to-top.mjs b/src/javascripts/components/back-to-top.mjs
@@ -4,18 +4,6 @@ import { Component } from 'govuk-frontend'
  * Website back to top link
  */
 class BackToTop extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-back-to-top'
 
   /**

diff --git a/src/javascripts/components/cookie-banner.mjs b/src/javascripts/components/cookie-banner.mjs
@@ -13,18 +13,6 @@ const cookieConfirmationRejectSelector = '.js-cookie-banner-confirmation-reject'
  * Website cookie banner
  */
 class CookieBanner extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'govuk-cookie-banner'
   /**
    * @param {Element} $module - HTML element

diff --git a/src/javascripts/components/cookies-page.mjs b/src/javascripts/components/cookies-page.mjs
@@ -6,18 +6,6 @@ import { getConsentCookie, setConsentCookie } from './cookie-functions.mjs'
  * Website cookies page
  */
 class CookiesPage extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-cookies-page'
   /**
    * @param {Element} $module - HTML element

diff --git a/src/javascripts/components/copy.mjs b/src/javascripts/components/copy.mjs
@@ -5,18 +5,6 @@ import { Component } from 'govuk-frontend'
  * Copy button for code examples
  */
 class Copy extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-copy'
 
   /**

diff --git a/src/javascripts/components/embed-card.mjs b/src/javascripts/components/embed-card.mjs
@@ -19,18 +19,6 @@ class EmbedCard extends Component {
     }
   }
 
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-embed-card'
 
   /**

diff --git a/src/javascripts/components/example-frame.mjs b/src/javascripts/components/example-frame.mjs
@@ -11,18 +11,6 @@ import iFrameResize from 'iframe-resizer/js/iframeResizer.js'
  * @augments Component<HTMLIFrameElement>
  */
 class ExampleFrame extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-example-frame'
   /**
    * @param {Element} $module - HTML element

diff --git a/src/javascripts/components/navigation.mjs b/src/javascripts/components/navigation.mjs
@@ -10,18 +10,6 @@ const subNavJSClass = '.js-app-navigation__subnav'
  * Website navigation
  */
 class Navigation extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   /**
    * Name for the component used when initialising using data-module attributes.
    */

diff --git a/src/javascripts/components/scroll-container.mjs b/src/javascripts/components/scroll-container.mjs
@@ -14,18 +14,6 @@ const scrollContainerResizeObserver = new window.ResizeObserver((entries) => {
  *
  */
 class ScrollContainer extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-scroll-container'
 
   /**

diff --git a/src/javascripts/components/search.mjs b/src/javascripts/components/search.mjs
@@ -38,18 +38,6 @@ const DEBOUNCE_TIME_TO_WAIT = () => {
  * Website search
  */
 class Search extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-search'
   /**
    * @param {Element} $module - HTML element

diff --git a/src/javascripts/components/tabs.mjs b/src/javascripts/components/tabs.mjs
@@ -11,18 +11,6 @@ import { Component } from 'govuk-frontend'
  * - panels - the content that is shown/hidden/switched; same across all breakpoints
  */
 class AppTabs extends Component {
-  /**
-   * Returns the root element of the component
-   *
-   * @returns {any} - the root element of component
-   */
-  get $root() {
-    // Unfortunately, govuk-frontend does not provide type definitions
-    // so TypeScript does not know of `this._$root`
-    // @ts-expect-error
-    return this._$root
-  }
-
   static moduleName = 'app-tabs'
 
   /**