Merge pull request #4207 from alphagov/govuk-frontend-typescript-defi…

…nition Add shorthand ambient module definition for 'govuk-frontend'
alphagov · Oct 11, 2024 · 984f448 · 984f448
2 parents 9484b8f + a830e84
commit 984f448
Show file tree

Hide file tree

Showing 12 changed files with 10 additions and 121 deletions.
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,9 @@
+/**  
+ * 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
+ */
+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'
 
   /**

diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
-  "include": ["**/*.js", "**/*.mjs"],
+  "include": ["**/*.js", "**/*.mjs", "**/*.ts"],
   "compilerOptions": {
     "lib": ["ESNext", "DOM"],
     "target": "ES2015"