Convert common helpers to Typescript (#2541)

framework/core/js/src/common/helpers/avatar.tsx

@@ -1,26 +1,28 @@
+import * as Mithril from 'mithril';
+import User from '../models/User';
+
 /**
  * The `avatar` helper displays a user's avatar.
  *
- * @param {User} user
+ * @param user
- * @param {Object} attrs Attributes to apply to the avatar element
+ * @param attrs Attributes to apply to the avatar element
- * @return {Object}
  */
-export default function avatar(user, attrs = {}) {
+export default function avatar(user: User, attrs: Object = {}): Mithril.Vnode {
   attrs.className = 'Avatar ' + (attrs.className || '');
-  let content = '';
+  let content: string = '';
 
   // If the `title` attribute is set to null or false, we don't want to give the
   // avatar a title. On the other hand, if it hasn't been given at all, we can
   // safely default it to the user's username.
-  const hasTitle = attrs.title === 'undefined' || attrs.title;
+  const hasTitle: boolean | string = attrs.title === 'undefined' || attrs.title;
   if (!hasTitle) delete attrs.title;
 
   // If a user has been passed, then we will set up an avatar using their
   // uploaded image, or the first letter of their username if they haven't
   // uploaded one.
   if (user) {
-    const username = user.displayName() || '?';
+    const username: string = user.displayName() || '?';
-    const avatarUrl = user.avatarUrl();
+    const avatarUrl: string = user.avatarUrl();
 
     if (hasTitle) attrs.title = attrs.title || username;
 

framework/core/js/src/common/helpers/listItems.tsx

@@ -1,15 +1,16 @@
+import * as Mithril from 'mithril';
 import Separator from '../components/Separator';
 import classList from '../utils/classList';
 
-function isSeparator(item) {
+function isSeparator(item): boolean {
   return item.tag === Separator;
 }
 
-function withoutUnnecessarySeparators(items) {
+function withoutUnnecessarySeparators(items: Array<Mithril.Vnode>): Array<Mithril.Vnode> {
   const newItems = [];
   let prevItem;
 
-  items.filter(Boolean).forEach((item, i) => {
+  items.filter(Boolean).forEach((item: Mithril.Vnode, i: number) => {
     if (!isSeparator(item) || (prevItem && !isSeparator(prevItem) && i !== items.length - 1)) {
       prevItem = item;
       newItems.push(item);
@@ -22,14 +23,11 @@ function withoutUnnecessarySeparators(items) {
 /**
  * The `listItems` helper wraps a collection of components in <li> tags,
  * stripping out any unnecessary `Separator` components.
- *
- * @param {*} items
- * @return {Array}
  */
-export default function listItems(items) {
+export default function listItems(items: Mithril.Vnode | Array<Mithril.Vnode>): Array<Mithril.Vnode> {
   if (!(items instanceof Array)) items = [items];
 
-  return withoutUnnecessarySeparators(items).map((item) => {
+  return withoutUnnecessarySeparators(items).map((item: Mithril.Vnode) => {
     const isListItem = item.tag && item.tag.isListItem;
     const active = item.tag && item.tag.isActive && item.tag.isActive(item.attrs);
     const className = (item.attrs && item.attrs.itemClassName) || item.itemClassName;
@@ -40,7 +38,7 @@ export default function listItems(items) {
       item.key = item.attrs.key;
     }
 
-    const node = isListItem ? (
+    const node: Mithril.Vnode = isListItem ? (
       item
     ) : (
       <li

framework/core/js/src/common/helpers/userOnline.tsx

@@ -1,12 +1,11 @@
+import * as Mithril from 'mithril';
+import User from '../models/User';
 import icon from './icon';
 
 /**
  * The `useronline` helper displays a green circle if the user is online
- *
- * @param {User} user
- * @return {Object}
  */
-export default function userOnline(user) {
+export default function userOnline(user: User): Mithril.Vnode {
   if (user.lastSeenAt() && user.isOnline()) {
     return <span className="UserOnline">{icon('fas fa-circle')}</span>;
   }

framework/core/js/src/common/helpers/username.tsx

@@ -1,11 +1,11 @@
+import * as Mithril from 'mithril';
+import User from '../models/User';
+
 /**
  * The `username` helper displays a user's username in a <span class="username">
  * tag. If the user doesn't exist, the username will be displayed as [deleted].
- *
- * @param {User} user
- * @return {Object}
  */
-export default function username(user) {
+export default function username(user: User): Mithril.Vnode {
   const name = (user && user.displayName()) || app.translator.trans('core.lib.username.deleted_text');
 
   return <span className="username">{name}</span>;