Typecheck `src/annotator/{config, util}` and `src/sidebar/*.js`

Enable typechecking for the following directories:

 - src/annotator/config
 - src/annotator/util
 - src/sidebar (excluding `ga.js`, `icons.js` and `index.js`)

Many functions in these directories are still not annotated, but this
will be added over time. `ga.js` was excluded because it deals with
globals added by Google Analytics. `icons.js` was excluded because TS
doesn't know how to handle `require('.../some-icon.svg')`. `index.js`
was excluded because that imports (and thus triggers checking for) every
other file in the sidebar app. It will need to be enabled last.

src/annotator/config/config-func-settings-from.js

+/**
+ * @typedef HypothesisWindowProps
+ * @prop {() => Object} [hypothesisConfig] - Function that returns configuration
+ *   for the Hypothesis client
+ */
+
 /**
  * Return an object containing config settings from window.hypothesisConfig().
  *
@@ -12,7 +18,7 @@
  *
  * If there's no window.hypothesisConfig() function then return {}.
  *
- * @param {Window} window_ - The window to search for a hypothesisConfig() function
+ * @param {Window & HypothesisWindowProps} window_ - The window to search for a hypothesisConfig() function
  * @return {Object} - Any config settings returned by hypothesisConfig()
  *
  */

src/annotator/util/observable.js

@@ -58,6 +58,7 @@ export function delay(delay, src) {
  * Buffers events from a source Observable, waiting for a pause of `delay`
  * ms with no events before emitting the last value from `src`.
  *
+ * @template T
  * @param {number} delay
  * @param {Observable<T>} src
  * @return {Observable<T>}

src/annotator/util/shadow-root.js

@@ -29,8 +29,8 @@ function loadStyles(shadowRoot) {
  * In browsers that support it, shadow DOM is used to isolate annotator UI
  * components from the host page's styles.
  *
- * @param {HTMLElement} - Container element to render the UI into
- * @return {Element} -
+ * @param {HTMLElement} container - Container element to render the UI into
+ * @return {HTMLElement|ShadowRoot} -
  *   The element to render the UI into. This may be `container` or the shadow
  *   root.
  */

src/sidebar/ga.js

+// @ts-nocheck - The `ga` property is unknown.
+
 let loaded = false;
 
 export default function loadGoogleAnalytics(trackingId) {

src/sidebar/icons.js

+// @ts-nocheck - TS doesn't understand `require('.../icon.svg')`
+
 /**
  * Set of icons used by the sidebar application via the `SvgIcon`
  * component.

src/sidebar/markdown-commands.js

@@ -10,16 +10,17 @@
 /**
  * Describes the state of a plain text input field.
  *
- * interface EditorState {
- *   text: string;
- *   selectionStart: number;
- *   selectionEnd: number;
- * }
+ * @typedef EditorState
+ * @prop {string} text
+ * @prop {number} selectionStart
+ * @prop {number} selectionEnd
  */
 
 /**
  * Types of Markdown link that can be inserted with
  * convertSelectionToLink()
+ *
+ * @enum {number}
  */
 export const LinkType = {
   ANCHOR_LINK: 0,
@@ -134,7 +135,7 @@ export function convertSelectionToLink(state, linkType) {
  * @param {EditorState} state - The current state of the input field.
  * @param {string} prefix - The prefix to add or remove
  *                          before the selection.
- * @param {string?} suffix - The suffix to add or remove after the selection,
+ * @param {string|undefined} suffix - The suffix to add or remove after the selection,
  *                           defaults to being the same as the prefix.
  * @param {string} placeholder - The text to insert between 'prefix' and
  *                               'suffix' if the input text is empty.
@@ -200,7 +201,7 @@ function endOfLine(str, pos) {
  * @param {EditorState} state - The initial state of the input field
  * @param {number} start - The start position within the input text
  * @param {number} end - The end position within the input text
- * @param {(EditorState, number) => EditorState} callback
+ * @param {(s: EditorState, start: number, end: number) => EditorState} callback
  *  - Callback which is invoked with the current state of the input and
  *    the start of the current line and returns the new state of the input.
  */

src/sidebar/media-embedder.js

@@ -49,7 +49,7 @@ function parseTimeString(timeValue) {
   // match[2] - Unit (e.g. 'h','m','s', or empty)
   while ((match = timePattern.exec(timeValue)) !== null) {
     if (match[2]) {
-      seconds += match[1] * multipliers[match[2]];
+      seconds += Number(match[1]) * multipliers[match[2]];
     } else {
       seconds += +match[1]; // Treat values missing units as seconds
     }

src/sidebar/search-client.js

-import EventEmitter from 'tiny-emitter';
+import { TinyEmitter } from 'tiny-emitter';
 
 /**
  * Client for the Hypothesis search API.
  *
  * SearchClient handles paging through results, canceling search etc.
  */
-export default class SearchClient extends EventEmitter {
+export default class SearchClient extends TinyEmitter {
   /**
    * @param {Object} searchFn - Function for querying the search API
    * @param {Object} opts - Search options
@@ -23,6 +23,7 @@ export default class SearchClient extends EventEmitter {
       this._incremental = true;
     }
     this._canceled = false;
+    this._results = [];
   }
 
   _getBatch(query, offset) {

src/sidebar/websocket.js

 import retry from 'retry';
-import EventEmitter from 'tiny-emitter';
+import { TinyEmitter } from 'tiny-emitter';
 
 // Status codes indicating the reason why a WebSocket connection closed.
 // See https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent and
@@ -27,7 +27,7 @@ const RECONNECT_MIN_DELAY = 1000;
  * - Uses the standard EventEmitter API for reporting open, close, error
  *   and message events.
  */
-export default class Socket extends EventEmitter {
+export default class Socket extends TinyEmitter {
   constructor(url) {
     super();
 

src/tsconfig.json

@@ -11,8 +11,15 @@
     "target": "ES2020"
   },
   "include": [
+    "annotator/config/*.js",
+    "annotator/util/*.js",
     "boot/*.js",
     "shared/*.js",
+    "sidebar/*.js",
     "sidebar/util/*.js"
+  ],
+  "exclude": [
+    // Enable this once the rest of `src/sidebar` is checked.
+    "sidebar/index.js"
   ]
 }