diff --git a/web/src/input_pill.ts b/web/src/input_pill.ts
index bca60b7312..a0e9f540dd 100644
--- a/web/src/input_pill.ts
+++ b/web/src/input_pill.ts
@@ -58,7 +58,7 @@ type InputPillRenderingDetails = {
 };
 
 // These are the functions that are exposed to other modules.
-type InputPillContainer<T> = {
+export type InputPillContainer<T> = {
     appendValue: (text: string) => void;
     appendValidatedData: (item: InputPillItem<T>) => void;
     getByElement: (element: HTMLElement) => InputPill<T> | undefined;
diff --git a/web/src/user_group_pill.js b/web/src/user_group_pill.ts
similarity index 51%
rename from web/src/user_group_pill.js
rename to web/src/user_group_pill.ts
index 3067dee583..d275f7d769 100644
--- a/web/src/user_group_pill.js
+++ b/web/src/user_group_pill.ts
@@ -1,10 +1,22 @@
+import type {InputPillContainer, InputPillItem} from "./input_pill";
+import type {UserGroup} from "./user_groups";
 import * as user_groups from "./user_groups";
 
-function display_pill(group) {
-    return group.name + ": " + group.members.size + " users";
+type UserGroupPill = {
+    id: number;
+    group_name: string;
+};
+
+type UserGroupPillWidget = InputPillContainer<UserGroupPill>;
+
+function display_pill(group: UserGroup): string {
+    return `${group.name}: ${group.members.size} users`;
 }
 
-export function create_item_from_group_name(group_name, current_items) {
+export function create_item_from_group_name(
+    group_name: string,
+    current_items: InputPillItem<UserGroupPill>[],
+): InputPillItem<UserGroupPill> | undefined {
     group_name = group_name.trim();
     const group = user_groups.get_user_group_from_name(group_name);
     if (!group) {
@@ -26,18 +38,18 @@ export function create_item_from_group_name(group_name, current_items) {
     return item;
 }
 
-export function get_group_name_from_item(item) {
+export function get_group_name_from_item(item: InputPillItem<UserGroupPill>): string {
     return item.group_name;
 }
 
-function get_user_ids_from_user_groups(items) {
+function get_user_ids_from_user_groups(items: InputPillItem<UserGroupPill>[]): number[] {
     const group_ids = items.map((item) => item.id).filter(Boolean);
     return group_ids.flatMap((group_id) => [
         ...user_groups.get_user_group_from_id(group_id).members,
     ]);
 }
 
-export function get_user_ids(pill_widget) {
+export function get_user_ids(pill_widget: UserGroupPillWidget): number[] {
     const items = pill_widget.items();
     let user_ids = get_user_ids_from_user_groups(items);
     user_ids = [...new Set(user_ids)];
@@ -47,18 +59,17 @@ export function get_user_ids(pill_widget) {
     return user_ids;
 }
 
-export function append_user_group(group, pill_widget) {
-    if (group !== undefined && group !== null) {
-        pill_widget.appendValidatedData({
-            type: "user_group",
-            display_value: display_pill(group),
-            id: group.id,
-        });
-        pill_widget.clear_text();
-    }
+export function append_user_group(group: UserGroup, pill_widget: UserGroupPillWidget): void {
+    pill_widget.appendValidatedData({
+        type: "user_group",
+        display_value: display_pill(group),
+        id: group.id,
+        group_name: group.name,
+    });
+    pill_widget.clear_text();
 }
 
-export function get_group_ids(pill_widget) {
+export function get_group_ids(pill_widget: UserGroupPillWidget): number[] {
     const items = pill_widget.items();
     let group_ids = items.map((item) => item.id);
     group_ids = group_ids.filter(Boolean);
@@ -66,13 +77,16 @@ export function get_group_ids(pill_widget) {
     return group_ids;
 }
 
-export function filter_taken_groups(items, pill_widget) {
+export function filter_taken_groups(
+    items: UserGroup[],
+    pill_widget: UserGroupPillWidget,
+): UserGroup[] {
     const taken_group_ids = get_group_ids(pill_widget);
     items = items.filter((item) => !taken_group_ids.includes(item.id));
     return items;
 }
 
-export function typeahead_source(pill_widget) {
+export function typeahead_source(pill_widget: UserGroupPillWidget): UserGroup[] {
     const groups = user_groups.get_realm_user_groups();
     return filter_taken_groups(groups, pill_widget);
 }
diff --git a/web/src/user_groups.ts b/web/src/user_groups.ts
index 016a6691ff..3795d0ec29 100644
--- a/web/src/user_groups.ts
+++ b/web/src/user_groups.ts
@@ -5,7 +5,7 @@ import {page_params} from "./page_params";
 import * as settings_config from "./settings_config";
 import type {User, UserGroupUpdateEvent} from "./types";
 
-type UserGroup = {
+export type UserGroup = {
     description: string;
     id: number;
     name: string;