Fix a bunch of type errors

js/src/@types/global.d.ts

@@ -21,7 +21,7 @@ declare type KeysOfType<Type extends object, Match> = {
  */
 declare type KeyOfType<Type extends object, Match> = KeysOfType<Type, Match>[keyof Type];
 
-declare type VnodeElementTag<Attrs = Record<string, unknown>, State = Record<string, unknown>> = string | ComponentTypes<Attrs, State>;
+declare type VnodeElementTag<Attrs = Record<string, unknown>, State = Record<string, unknown>> = string | import('mithril').ComponentTypes<Attrs, State>;
 
 /**
  * @deprecated Please import `app` from a namespace instead of using it as a global variable.

js/src/admin/components/AdminPage.tsx

@@ -13,8 +13,8 @@ import generateElementId from '../utils/generateElementId';
 import ColorPreviewInput from '../../common/components/ColorPreviewInput';
 
 export interface AdminHeaderOptions {
-  title: string;
-  description: string;
+  title: Mithril.Children;
+  description: Mithril.Children;
   icon: string;
   /**
    * Will be used as the class for the AdminPage.

js/src/admin/components/ExtensionPage.tsx

@@ -16,6 +16,7 @@ import RequestError from '../../common/utils/RequestError';
 import { Extension } from '../AdminApplication';
 import { IPageAttrs } from '../../common/components/Page';
 import type Mithril from 'mithril';
+import extractText from '../../common/utils/extractText';
 
 export interface ExtensionPageAttrs extends IPageAttrs {
   id: string;
@@ -156,7 +157,7 @@ export default class ExtensionPage<Attrs extends ExtensionPageAttrs = ExtensionP
 
     if (!this.isEnabled()) {
       const purge = () => {
-        if (confirm(app.translator.trans('core.admin.extension.confirm_purge'))) {
+        if (confirm(extractText(app.translator.trans('core.admin.extension.confirm_purge')))) {
           app
             .request({
               url: app.forum.attribute('apiUrl') + '/extensions/' + this.extension.id,

js/src/admin/components/LoadingModal.tsx

@@ -1,7 +1,7 @@
 import app from '../../admin/app';
-import Modal from '../../common/components/Modal';
+import Modal, { IInternalModalAttrs } from '../../common/components/Modal';
 
-export default class LoadingModal<ModalAttrs = {}> extends Modal<ModalAttrs> {
+export default class LoadingModal<ModalAttrs extends IInternalModalAttrs = IInternalModalAttrs> extends Modal<ModalAttrs> {
   /**
    * @inheritdoc
    */

js/src/admin/components/UserListPage.tsx

@@ -21,7 +21,7 @@ type ColumnData = {
   /**
    * Column title
    */
-  name: String;
+  name: Mithril.Children;
   /**
    * Component(s) to show for this column.
    */

js/src/common/Application.tsx

@@ -258,7 +258,7 @@ export default class Application {
 
     this.forum = this.store.getById('forums', '1')!;
 
-    this.session = new Session(this.store.getById('users', String(this.data.session.userId)), this.data.session.csrfToken);
+    this.session = new Session(this.store.getById<User>('users', String(this.data.session.userId)) ?? null, this.data.session.csrfToken);
 
     this.mount();
 

js/src/common/Store.ts

@@ -147,13 +147,13 @@ export default class Store {
   async find<M extends Model>(
     type: string,
     id: string,
-    params: ApiQueryParamsSingle,
+    params?: ApiQueryParamsSingle,
     options?: ApiQueryRequestOptions<ApiPayloadSingle>
   ): Promise<ApiResponseSingle<M>>;
   async find<Ms extends Model[]>(
     type: string,
     ids: string[],
-    params: ApiQueryParamsPlural,
+    params?: ApiQueryParamsPlural,
     options?: ApiQueryRequestOptions<ApiPayloadPlural>
   ): Promise<ApiResponsePlural<Ms[number]>>;
   async find<M extends Model | Model[]>(

js/src/common/components/Modal.tsx

@@ -30,7 +30,7 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
   /**
    * Attributes for an alert component to show below the header.
    */
-  alertAttrs!: AlertAttrs;
+  alertAttrs: AlertAttrs | null = null;
 
   oninit(vnode: Mithril.VnodeDOM<ModalAttrs, this>) {
     super.oninit(vnode);
@@ -122,7 +122,7 @@ export default abstract class Modal<ModalAttrs extends IInternalModalAttrs = IIn
   /**
    * Get the title of the modal dialog.
    */
-  abstract title(): string;
+  abstract title(): Mithril.Children;
 
   /**
    * Get the content of the modal.

js/src/common/models/Discussion.tsx

@@ -61,7 +61,7 @@ export default class Discussion extends Model {
     return computed<boolean, this>('unreadCount', (unreadCount) => !!unreadCount).call(this);
   }
   isRead() {
-    return computed<boolean, this>('unreadCount', (unreadCount) => app.session.user && !unreadCount).call(this);
+    return computed<boolean, this>('unreadCount', (unreadCount) => !!(app.session.user && !unreadCount)).call(this);
   }
 
   hiddenAt() {
@@ -112,7 +112,7 @@ export default class Discussion extends Model {
    * user.
    */
   unreadCount(): number {
-    const user: User = app.session.user;
+    const user = app.session.user;
 
     if (user && (user.markedAllAsReadAt()?.getTime() ?? 0) < this.lastPostedAt()?.getTime()!) {
       const unreadCount = Math.max(0, (this.lastPostNumber() ?? 0) - (this.lastReadPostNumber() || 0));

js/src/common/models/Post.ts

@@ -9,7 +9,7 @@ export default class Post extends Model {
     return Model.attribute<number>('number').call(this);
   }
   discussion() {
-    return Model.hasOne<Discussion>('discussion').call(this);
+    return Model.hasOne<Discussion>('discussion').call(this) as Discussion;
   }
 
   createdAt() {

js/src/common/utils/abbreviateNumber.ts

@@ -1,4 +1,5 @@
 import app from '../../common/app';
+import extractText from './extractText';
 
 /**
  * The `abbreviateNumber` utility converts a number to a shorter localized form.
@@ -10,9 +11,9 @@ import app from '../../common/app';
 export default function abbreviateNumber(number: number): string {
   // TODO: translation
   if (number >= 1000000) {
-    return Math.floor(number / 1000000) + app.translator.trans('core.lib.number_suffix.mega_text');
+    return Math.floor(number / 1000000) + extractText(app.translator.trans('core.lib.number_suffix.mega_text'));
   } else if (number >= 1000) {
-    return (number / 1000).toFixed(1) + app.translator.trans('core.lib.number_suffix.kilo_text');
+    return (number / 1000).toFixed(1) + extractText(app.translator.trans('core.lib.number_suffix.kilo_text'));
   } else {
     return number.toString();
   }

js/src/forum/ForumApplication.ts

@@ -23,6 +23,7 @@ import isSafariMobile from './utils/isSafariMobile';
 import type Notification from './components/Notification';
 import type Post from './components/Post';
 import Discussion from '../common/models/Discussion';
+import extractText from '../common/utils/extractText';
 
 export default class ForumApplication extends Application {
   /**
@@ -99,7 +100,7 @@ export default class ForumApplication extends Application {
     }
 
     this.routes[defaultAction].path = '/';
-    this.history.push(defaultAction, this.translator.trans('core.forum.header.back_to_index_tooltip'), '/');
+    this.history.push(defaultAction, extractText(this.translator.trans('core.forum.header.back_to_index_tooltip')), '/');
 
     this.pane = new Pane(document.getElementById('app'));
 
@@ -124,8 +125,9 @@ export default class ForumApplication extends Application {
       app.history.home();
 
       // Reload the current user so that their unread notification count is refreshed.
-      if (app.session.user) {
-        app.store.find('users', app.session.user.id());
+      const userId = app.session.user?.id()
+      if (userId) {
+        app.store.find('users', userId);
         m.redraw();
       }
     });

js/src/forum/components/DiscussionsSearchSource.tsx

@@ -38,7 +38,7 @@ export default class DiscussionsSearchSource implements SearchSource {
 
       return (
         <li className="DiscussionSearchResult" data-index={'discussions' + discussion.id()}>
-          <Link href={app.route.discussion(discussion, mostRelevantPost && mostRelevantPost.number())}>
+          <Link href={app.route.discussion(discussion, (mostRelevantPost && mostRelevantPost.number()) || 0)}>
             <div className="DiscussionSearchResult-title">{highlight(discussion.title(), query)}</div>
             {mostRelevantPost ? (
               <div className="DiscussionSearchResult-excerpt">{highlight(mostRelevantPost.contentPlain() ?? '', query, 100)}</div>

js/src/forum/states/NotificationListState.ts

@@ -15,7 +15,7 @@ export default class NotificationListState extends PaginatedListState<Notificati
    * Load the next page of notification results.
    */
   load(): Promise<void> {
-    if (app.session.user.newNotificationCount()) {
+    if (app.session.user?.newNotificationCount()) {
       this.pages = [];
       this.location = { page: 1 };
     }
@@ -24,7 +24,7 @@ export default class NotificationListState extends PaginatedListState<Notificati
       return Promise.resolve();
     }
 
-    app.session.user.pushAttributes({ newNotificationCount: 0 });
+    app.session.user?.pushAttributes({ newNotificationCount: 0 });
 
     return super.loadNext();
   }
@@ -35,7 +35,7 @@ export default class NotificationListState extends PaginatedListState<Notificati
   markAllAsRead() {
     if (this.pages.length === 0) return;
 
-    app.session.user.pushAttributes({ unreadNotificationCount: 0 });
+    app.session.user?.pushAttributes({ unreadNotificationCount: 0 });
 
     this.pages.forEach((page) => {
       page.items.forEach((notification) => notification.pushAttributes({ isRead: true }));