diff --git a/tools/test-js-with-node b/tools/test-js-with-node
index b2f769dce5..e427ba2907 100755
--- a/tools/test-js-with-node
+++ b/tools/test-js-with-node
@@ -255,7 +255,7 @@ EXEMPT_FILES = make_set(
         "web/src/ui_util.ts",
         "web/src/unread.ts",
         "web/src/unread_ops.js",
-        "web/src/unread_ui.js",
+        "web/src/unread_ui.ts",
         "web/src/upload.js",
         "web/src/upload_widget.ts",
         "web/src/url-template.d.ts",
diff --git a/web/src/message_lists.ts b/web/src/message_lists.ts
index bdda2d9002..a01de9dedf 100644
--- a/web/src/message_lists.ts
+++ b/web/src/message_lists.ts
@@ -25,6 +25,8 @@ type MessageList = {
     all_messages: () => Message[];
     get: (id: number) => Message | undefined;
     pre_narrow_offset?: number;
+    can_mark_messages_read_without_setting: () => boolean;
+    resume_reading: () => void;
     data: MessageListData;
 };
 
diff --git a/web/src/unread_ui.js b/web/src/unread_ui.ts
similarity index 81%
rename from web/src/unread_ui.js
rename to web/src/unread_ui.ts
index 1a473a6745..06ce371435 100644
--- a/web/src/unread_ui.js
+++ b/web/src/unread_ui.ts
@@ -1,25 +1,29 @@
 import $ from "jquery";
+import assert from "minimalistic-assert";
 
 import render_mark_as_read_disabled_banner from "../templates/unread_banner/mark_as_read_disabled_banner.hbs";
 import render_mark_as_read_only_in_conversation_view from "../templates/unread_banner/mark_as_read_only_in_conversation_view.hbs";
 import render_mark_as_read_turned_off_banner from "../templates/unread_banner/mark_as_read_turned_off_banner.hbs";
 
 import * as message_lists from "./message_lists";
+import type {Message} from "./message_store";
 import * as narrow_state from "./narrow_state";
 import {page_params} from "./page_params";
 import {web_mark_read_on_scroll_policy_values} from "./settings_config";
 import * as unread from "./unread";
+import type {FullUnreadCountsData} from "./unread";
 import {user_settings} from "./user_settings";
 
 let user_closed_unread_banner = false;
 
-const update_unread_counts_hooks = [];
+type UpdateUnreadCountsHook = (counts: FullUnreadCountsData, skip_animations: boolean) => void;
+const update_unread_counts_hooks: UpdateUnreadCountsHook[] = [];
 
-export function register_update_unread_counts_hook(f) {
+export function register_update_unread_counts_hook(f: UpdateUnreadCountsHook): void {
     update_unread_counts_hooks.push(f);
 }
 
-export function update_unread_banner() {
+export function update_unread_banner(): void {
     const filter = narrow_state.filter();
     const is_conversation_view = filter === undefined ? false : filter.is_conversation_view();
     if (
@@ -36,6 +40,7 @@ export function update_unread_banner() {
             render_mark_as_read_only_in_conversation_view(),
         );
     } else {
+        assert(message_lists.current !== undefined);
         $("#mark_read_on_scroll_state_banner").html(render_mark_as_read_turned_off_banner());
         if (message_lists.current.can_mark_messages_read_without_setting()) {
             hide_unread_banner();
@@ -43,31 +48,31 @@ export function update_unread_banner() {
     }
 }
 
-export function hide_unread_banner() {
+export function hide_unread_banner(): void {
     // Use visibility instead of hide() to prevent messages on the screen from
     // shifting vertically.
     $("#mark_read_on_scroll_state_banner").toggleClass("invisible", true);
 }
 
-export function reset_unread_banner() {
+export function reset_unread_banner(): void {
     hide_unread_banner();
     user_closed_unread_banner = false;
 }
 
-export function notify_messages_remain_unread() {
+export function notify_messages_remain_unread(): void {
     if (!user_closed_unread_banner) {
         $("#mark_read_on_scroll_state_banner").toggleClass("invisible", false);
     }
 }
 
-export function set_count_toggle_button($elem, count) {
+export function set_count_toggle_button($elem: JQuery, count: number): JQuery {
     if (count === 0) {
         return $elem.hide();
     }
     return $elem.show();
 }
 
-export function update_unread_counts(skip_animations = false) {
+export function update_unread_counts(skip_animations = false): void {
     // Pure computation:
     const res = unread.get_counts();
 
@@ -83,7 +88,7 @@ export function update_unread_counts(skip_animations = false) {
     set_count_toggle_button($("#streamlist-toggle-unreadcount"), res.home_unread_messages);
 }
 
-export function should_display_bankruptcy_banner() {
+export function should_display_bankruptcy_banner(): boolean {
     // Until we've handled possibly declaring bankruptcy, don't show
     // unread counts since they only consider messages that are loaded
     // client side and may be different from the numbers reported by
@@ -106,10 +111,15 @@ export function should_display_bankruptcy_banner() {
     return false;
 }
 
-export function initialize({notify_server_messages_read}) {
+export function initialize({
+    notify_server_messages_read,
+}: {
+    notify_server_messages_read: (unread_messages: Message[]) => void;
+}): void {
     const skip_animations = true;
     update_unread_counts(skip_animations);
     $("body").on("click", "#mark_view_read", () => {
+        assert(message_lists.current !== undefined);
         // Mark all messages in the current view as read.
         //
         // BUG: This logic only supports marking messages visible in