Update to Typescript 7 (#39987)

app/javascript/mastodon/actions/streaming.js

@@ -36,7 +36,7 @@ const randomUpTo = max =>
  * @typedef {import('mastodon/store').AppDispatch} Dispatch
  * @typedef {import('mastodon/store').GetState} GetState
  * @typedef {import('redux').UnknownAction} UnknownAction
- * @typedef {function(Dispatch, GetState): Promise<void>} FallbackFunction
+ * @typedef {(dispatch: Dispatch, getState: GetState) => Promise<void>} FallbackFunction
  */
 
 /**
@@ -45,9 +45,9 @@ const randomUpTo = max =>
  * @param {Object.<string, string>} params
  * @param {Object} options
  * @param {FallbackFunction} [options.fallback]
- * @param {function(): UnknownAction} [options.fillGaps]
- * @param {function(object): boolean} [options.accept]
- * @returns {function(): void}
+ * @param {() => UnknownAction} [options.fillGaps]
+ * @param {(status: object) => boolean} [options.accept]
+ * @returns {() => void}
  */
 export const connectTimelineStream = (timelineId, channelName, params = {}, options = {}) => {
   const { messages } = getLocale();
@@ -159,7 +159,7 @@ async function refreshHomeTimelineAndNotification(dispatch) {
 }
 
 /**
- * @returns {function(): void}
+ * @returns {() => void}
  */
 export const connectUserStream = () =>
   connectTimelineStream('home', 'user', {}, {
@@ -171,7 +171,7 @@ export const connectUserStream = () =>
 /**
  * @param {Object} options
  * @param {boolean} [options.onlyMedia]
- * @returns {function(): void}
+ * @returns {() => void}
  */
 export const connectCommunityStream = ({ onlyMedia } = {}) =>
   connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`, {}, {
@@ -183,7 +183,7 @@ export const connectCommunityStream = ({ onlyMedia } = {}) =>
  * @param {Object} options
  * @param {boolean} [options.onlyMedia]
  * @param {boolean} [options.onlyRemote]
- * @returns {function(): void}
+ * @returns {() => void}
  */
 export const connectPublicStream = ({ onlyMedia, onlyRemote } = {}) =>
   connectTimelineStream(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, `public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, {}, {
@@ -195,21 +195,21 @@ export const connectPublicStream = ({ onlyMedia, onlyRemote } = {}) =>
  * @param {string} columnId
  * @param {string} tagName
  * @param {boolean} onlyLocal
- * @param {function(object): boolean} accept
- * @returns {function(): void}
+ * @param {(status: object) => boolean} accept
+ * @returns {() => void}
  */
 export const connectHashtagStream = (columnId, tagName, onlyLocal, accept) =>
   connectTimelineStream(`hashtag:${columnId}${onlyLocal ? ':local' : ''}`, `hashtag${onlyLocal ? ':local' : ''}`, { tag: tagName }, { accept });
 
 /**
- * @returns {function(): void}
+ * @returns {() => void}
  */
 export const connectDirectStream = () =>
   connectTimelineStream('direct', 'direct');
 
 /**
  * @param {string} listId
- * @returns {function(): void}
+ * @returns {() => void}
  */
 export const connectListStream = listId =>
   connectTimelineStream(`list:${listId}`, 'list', { list: listId }, {

app/javascript/mastodon/components/account_header/buttons.tsx

@@ -69,6 +69,7 @@ const AccountButtonsOther: FC<
   const dispatch = useAppDispatch();
   const handleNotifyToggle = useCallback(() => {
     if (account) {
+      // @ts-expect-error this action is not typed yet
       dispatch(followAccount(account.id, { notify: !relationship?.notifying }));
     }
   }, [dispatch, account, relationship]);

app/javascript/mastodon/components/account_header/menu.tsx

@@ -395,6 +395,7 @@ function getMenuItems({
         ),
         action: () => {
           dispatch(
+            // @ts-expect-error this action is not typed yet
             followAccount(account.id, {
               reblogs: !relationship.showing_reblogs,
             }),

app/javascript/mastodon/components/edited_timestamp/index.tsx

@@ -62,9 +62,7 @@ export const EditedTimestamp: React.FC<{
       const formattedDate = (
         <RelativeTimestamp timestamp={item.get('created_at') as string} long />
       );
-      const formattedName = (
-        <InlineAccount accountId={item.get('account') as string} />
-      );
+      const formattedName = <InlineAccount accountId={item.get('account')} />;
 
       const label = (item.get('original') as boolean) ? (
         <FormattedMessage

app/javascript/mastodon/components/follow_button.tsx

@@ -124,6 +124,7 @@ export const FollowButton: React.FC<{
         }),
       );
     } else {
+      // @ts-expect-error this action is not typed yet
       dispatch(followAccount(accountId));
     }
   }, [signedIn, relationship, accountId, withUnmute, account, dispatch]);

app/javascript/mastodon/components/remote_hint.tsx

@@ -13,12 +13,7 @@ export const RemoteHint: React.FC<RemoteHintProps> = ({ accountId }) => {
     accountId ? state.accounts.get(accountId) : undefined,
   );
   const domain = account?.acct ? account.acct.split('@')[1] : undefined;
-  if (
-    !account ||
-    !account.url ||
-    account.acct !== account.username ||
-    !domain
-  ) {
+  if (!account?.url || account.acct !== account.username || !domain) {
     return null;
   }
 

app/javascript/mastodon/features/directory/components/account_card.tsx

@@ -33,7 +33,7 @@ export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
 
         <div className='account-card__title'>
           <div className='account-card__title__avatar'>
-            <Avatar account={account as Account} size={56} />
+            <Avatar account={account} size={56} />
           </div>
           <DisplayName account={account as Account} />
         </div>

app/javascript/mastodon/hooks/useSearchTags.ts

@@ -89,10 +89,10 @@ export function useSearchTags({
   }, []);
 
   // Add dedicated item for adding the current query
-  const tags = useMemo(() => {
+  const tags = useMemo((): TagSearchResult[] => {
     const trimmedQuery = query ? trimHashFromStart(query.trim()) : '';
     if (!trimmedQuery) {
-      return fetchedTags as TagSearchResult[];
+      return fetchedTags;
     }
 
     const results: TagSearchResult[] = [...fetchedTags]; // Make array mutable

app/javascript/mastodon/models/poll.ts

@@ -18,11 +18,11 @@ export interface PollOption extends ApiPollOptionJSON {
 
 export function createPollOptionTranslationFromServerJSON(translation: {
   title: string;
-}) {
+}): PollOptionTranslation {
   return {
     ...translation,
     titleHtml: escapeTextContentForBrowser(translation.title),
-  } as PollOptionTranslation;
+  };
 }
 
 export interface Poll extends Omit<

app/javascript/mastodon/reducers/notification_groups.ts

@@ -371,7 +371,7 @@ function fillNotificationsGap(
       type: 'gap',
       maxId: notifications.at(-1)?.page_max_id,
       sinceId,
-    } as NotificationGap);
+    } satisfies NotificationGap);
   }
 
   // Remove older groups covered by the API

app/javascript/mastodon/reducers/slices/annual_report.ts

@@ -24,12 +24,14 @@ interface AnnualReportState {
   report?: AnnualReport;
 }
 
+const initialState: AnnualReportState = {
+  year: wrapstodon?.year,
+  state: wrapstodon?.state,
+};
+
 const annualReportSlice = createSlice({
   name: 'annualReport',
-  initialState: {
-    year: wrapstodon?.year,
-    state: wrapstodon?.state,
-  } as AnnualReportState,
+  initialState,
   reducers: {
     setReport(state, action: PayloadAction<AnnualReport>) {
       state.report = action.payload;

app/javascript/mastodon/reducers/slices/emojis.ts

@@ -14,14 +14,16 @@ interface EmojisState {
   localesLoaded: Locale[];
 }
 
+const initialState: EmojisState = {
+  custom: {},
+  customCategories: {},
+  customLoaded: false,
+  localesLoaded: [],
+};
+
 const emojisSlice = createSlice({
   name: 'emojis',
-  initialState: {
-    custom: {},
-    customCategories: {},
-    customLoaded: false,
-    localesLoaded: [],
-  } as EmojisState,
+  initialState,
   reducers: {
     loadLocale(state, action: PayloadAction<string>) {
       const locale = toSupportedLocale(action.payload);

app/javascript/mastodon/stream.js

@@ -13,9 +13,9 @@ let sharedConnection;
  * @typedef Subscription
  * @property {string} channelName
  * @property {Object.<string, string>} params
- * @property {function(): void} onConnect
- * @property {function(StreamEvent): void} onReceive
- * @property {function(): void} onDisconnect
+ * @property {() => void} onConnect
+ * @property {(event: StreamEvent) => void} onReceive
+ * @property {() => void} onDisconnect
  */
 
 /**
@@ -146,8 +146,8 @@ const channelNameWithInlineParams = (channelName, params) => {
 /**
  * @param {string} channelName
  * @param {Object.<string, string>} params
- * @param {function(Dispatch, GetState): { onConnect: (function(): void), onReceive: (function(StreamEvent): void), onDisconnect: (function(): void) }} callbacks
- * @returns {function(): void}
+ * @param {(dispatch: Dispatch, getState: GetState) => { onConnect: () => void, onReceive: (event: StreamEvent) => void, onDisconnect: () => void }} callbacks
+ * @returns {() => void}
  */
 // @ts-expect-error
 export const connectStream = (channelName, params, callbacks) => (dispatch, getState) => {
@@ -221,7 +221,7 @@ const KNOWN_EVENT_TYPES = [
 
 /**
  * @param {MessageEvent} e
- * @param {function(StreamEvent): void} received
+ * @param {(event: StreamEvent) => void} received
  */
 const handleEventSourceMessage = (e, received) => {
   received({
@@ -234,7 +234,7 @@ const handleEventSourceMessage = (e, received) => {
  * @param {string} streamingAPIBaseURL
  * @param {string} accessToken
  * @param {string} channelName
- * @param {{ connected: function(): void, received: function(StreamEvent): void, disconnected: function(): void, reconnected: function(): void }} callbacks
+ * @param {{ connected: () => void, received: (event: StreamEvent) => void, disconnected: () => void, reconnected: () => void }} callbacks
  * @returns {WebSocketClient | EventSource}
  */
 const createConnection = (streamingAPIBaseURL, accessToken, channelName, { connected, received, disconnected, reconnected }) => {
@@ -274,7 +274,7 @@ const createConnection = (streamingAPIBaseURL, accessToken, channelName, { conne
     es.addEventListener(type, e => handleEventSourceMessage(/** @type {MessageEvent} */(e), received));
   });
 
-  es.onerror = /** @type {function(): void} */ (disconnected);
+  es.onerror = /** @type {() => void} */ (disconnected);
 
   return es;
 };