info_overlay: Convert module to TypeScript.

docs/subsystems/markdown.md

@@ -106,7 +106,7 @@ places:
   your changes won't be supported in the frontend processor.
 - If desired, the typeahead logic in `web/src/composebox_typeahead.js`.
 - The test suite, probably via adding entries to `zerver/tests/fixtures/markdown_test_cases.json`.
-- The in-app Markdown documentation (`markdown_help_rows` in `web/src/info_overlay.js`).
+- The in-app Markdown documentation (`markdown_help_rows` in `web/src/info_overlay.ts`).
 - The list of changes to Markdown at the end of this document.
 
 Important considerations for any changes are:

tools/test-js-with-node

@@ -117,7 +117,7 @@ EXEMPT_FILES = make_set(
         "web/src/hotspots.ts",
         "web/src/inbox_ui.js",
         "web/src/inbox_util.ts",
-        "web/src/info_overlay.js",
+        "web/src/info_overlay.ts",
         "web/src/integration_url_modal.ts",
         "web/src/invite.ts",
         "web/src/left_sidebar_navigation_area.ts",

web/src/gear_menu.js

@@ -79,7 +79,7 @@ mechanism to link to external pages, and they
 have a target of "_blank".
 
 The "info:" items use our info overlay system
-in web/src/info_overlay.js.  They are dispatched
+in web/src/info_overlay.ts.  They are dispatched
 using a click handler in web/src/click_handlers.js.
 The click handler uses "[data-overlay-trigger]" as
 the selector and then calls browser_history.go_to_location.

web/src/info_overlay.ts

@@ -7,6 +7,7 @@ import render_search_operator from "../templates/search_operators.hbs";
 import * as browser_history from "./browser_history";
 import * as common from "./common";
 import * as components from "./components";
+import type {Toggle} from "./components";
 import {$t, $t_html} from "./i18n";
 import * as keydown_util from "./keydown_util";
 import * as markdown from "./markdown";
@@ -18,10 +19,10 @@ import * as util from "./util";
 
 // Make it explicit that our toggler is undefined until
 // set_up_toggler is called.
-export let toggler;
+export let toggler: Toggle | undefined;
 
-function format_usage_html(...keys) {
+function format_usage_html(...keys: string[]): string {
-    const get_formatted_keys = () => keys.map((key) => `<kbd>${key}</kbd>`).join("+");
+    const get_formatted_keys: () => string = () => keys.map((key) => `<kbd>${key}</kbd>`).join("+");
     return $t_html(
         {
             defaultMessage: "(or <key-html></key-html>)",
@@ -243,7 +244,7 @@ Coffee`,
     },
 ];
 
-export function set_up_toggler() {
+export function set_up_toggler(): void {
     for (const row of markdown_help_rows) {
         if (row.markdown && !row.output_html) {
             const message = {
@@ -274,7 +275,7 @@ export function set_up_toggler() {
             {label: $t({defaultMessage: "Message formatting"}), key: "message-formatting"},
             {label: $t({defaultMessage: "Search filters"}), key: "search-operators"},
         ],
-        callback(_name, key) {
+        callback(_name: string, key: string) {
             $(".overlay-modal").hide();
             $(`#${CSS.escape(key)}`).show();
             scroll_util
@@ -314,7 +315,7 @@ export function set_up_toggler() {
     common.adjust_mac_kbd_tags("#markdown-instructions kbd");
 }
 
-export function show(target) {
+export function show(target: string | undefined): void {
     const $overlay = $(".informational-overlays");
 
     if (!$overlay.hasClass("show")) {
@@ -332,6 +333,6 @@ export function show(target) {
     }
 
     if (target) {
-        toggler.goto(target);
+        toggler!.goto(target);
     }
 }