diff --git a/js/src/forum/components/WelcomeHero.js b/js/src/forum/components/WelcomeHero.js
deleted file mode 100644
index c4380a79c..000000000
--- a/js/src/forum/components/WelcomeHero.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import app from '../../forum/app';
-import Component from '../../common/Component';
-import Button from '../../common/components/Button';
-
-/**
- * The `WelcomeHero` component displays a hero that welcomes the user to the
- * forum.
- */
-export default class WelcomeHero extends Component {
-  oninit(vnode) {
-    super.oninit(vnode);
-
-    this.hidden = localStorage.getItem('welcomeHidden');
-  }
-
-  view() {
-    if (this.hidden) return <div />;
-
-    const slideUp = () => {
-      this.$().slideUp(this.hide.bind(this));
-    };
-
-    return (
-      <header className="Hero WelcomeHero">
-        <div class="container">
-          {Button.component({
-            icon: 'fas fa-times',
-            onclick: slideUp,
-            className: 'Hero-close Button Button--icon Button--link',
-            'aria-label': app.translator.trans('core.forum.welcome_hero.hide'),
-          })}
-
-          <div className="containerNarrow">
-            <h2 className="Hero-title">{app.forum.attribute('welcomeTitle')}</h2>
-            <div className="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
-          </div>
-        </div>
-      </header>
-    );
-  }
-
-  /**
-   * Hide the welcome hero.
-   */
-  hide() {
-    localStorage.setItem('welcomeHidden', 'true');
-
-    this.hidden = true;
-  }
-}
diff --git a/js/src/forum/components/WelcomeHero.tsx b/js/src/forum/components/WelcomeHero.tsx
new file mode 100644
index 000000000..55ec04682
--- /dev/null
+++ b/js/src/forum/components/WelcomeHero.tsx
@@ -0,0 +1,69 @@
+import app from '../app';
+import Component from '../../common/Component';
+import Button from '../../common/components/Button';
+import type Mithril from 'mithril';
+
+export interface IWelcomeHeroAttrs {}
+
+const LOCAL_STORAGE_KEY = 'welcomeHidden';
+
+/**
+ * The `WelcomeHero` component displays a hero that welcomes the user to the
+ * forum.
+ */
+export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
+  /**
+   * @deprecated Extend the `isHidden` method instead.
+   */
+  hidden: boolean = false;
+
+  oninit(vnode: Mithril.Vnode<IWelcomeHeroAttrs, this>) {
+    super.oninit(vnode);
+  }
+
+  view(vnode: Mithril.Vnode<IWelcomeHeroAttrs, this>) {
+    if (this.isHidden()) return null;
+
+    const slideUp = () => {
+      this.$().slideUp(this.hide.bind(this));
+    };
+
+    return (
+      <header class="Hero WelcomeHero">
+        <div class="container">
+          <Button
+            icon="fas fa-times"
+            onclick={slideUp}
+            className="Hero-close Button Button--icon Button--link"
+            aria-label={app.translator.trans('core.forum.welcome_hero.hide')}
+          />
+
+          <div class="containerNarrow">
+            <h2 class="Hero-title">{app.forum.attribute('welcomeTitle')}</h2>
+            <div class="Hero-subtitle">{m.trust(app.forum.attribute('welcomeMessage'))}</div>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
+  /**
+   * Hide the welcome hero.
+   */
+  hide() {
+    localStorage.setItem(LOCAL_STORAGE_KEY, 'true');
+  }
+
+  /**
+   * Determines whether the welcome hero should be hidden.
+   *
+   * @returns if the welcome hero is hidden.
+   */
+  isHidden(): boolean {
+    if (!app.forum.attribute<string>('welcomeTitle')?.trim()) return true;
+    if (localStorage.getItem(LOCAL_STORAGE_KEY)) return true;
+    if (this.hidden) return true;
+
+    return false;
+  }
+}