Upgrade to typescript-eslint v6 (#25904)

.eslintrc.js

@@ -325,8 +325,8 @@ module.exports = {
 
       extends: [
         'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/recommended-requiring-type-checking',
+        'plugin:@typescript-eslint/strict-type-checked',
+        'plugin:@typescript-eslint/stylistic-type-checked',
         'plugin:react/recommended',
         'plugin:react-hooks/recommended',
         'plugin:jsx-a11y/recommended',
@@ -338,7 +338,7 @@ module.exports = {
       ],
 
       parserOptions: {
-        project: './tsconfig.json',
+        project: true,
         tsconfigRootDir: __dirname,
       },
 
@@ -348,6 +348,7 @@ module.exports = {
         '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
         '@typescript-eslint/consistent-type-exports': 'error',
         '@typescript-eslint/consistent-type-imports': 'error',
+        "@typescript-eslint/prefer-nullish-coalescing": ['error', {ignorePrimitives: {boolean: true}}],
 
         'jsdoc/require-jsdoc': 'off',
 

app/javascript/mastodon/blurhash.ts

@@ -86,10 +86,9 @@ const DIGIT_CHARACTERS = [
 
 export const decode83 = (str: string) => {
   let value = 0;
-  let c, digit;
+  let digit;
 
-  for (let i = 0; i < str.length; i++) {
-    c = str[i];
+  for (const c of str) {
     digit = DIGIT_CHARACTERS.indexOf(c);
     value = value * 83 + digit;
   }

app/javascript/mastodon/components/autosuggest_hashtag.tsx

@@ -6,11 +6,11 @@ interface Props {
   tag: {
     name: string;
     url?: string;
-    history?: Array<{
+    history?: {
       uses: number;
       accounts: string;
       day: string;
-    }>;
+    }[];
     following?: boolean;
     type: 'hashtag';
   };

app/javascript/mastodon/components/avatar.tsx

@@ -5,7 +5,7 @@ import type { Account } from '../../types/resources';
 import { autoPlayGif } from '../initial_state';
 
 interface Props {
-  account: Account;
+  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -3,8 +3,8 @@ import type { Account } from '../../types/resources';
 import { autoPlayGif } from '../initial_state';
 
 interface Props {
-  account: Account;
-  friend: Account;
+  account: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
+  friend: Account | undefined; // FIXME: remove `undefined` once we know for sure its always there
   size?: number;
   baseSize?: number;
   overlaySize?: number;

app/javascript/mastodon/components/display_name.tsx

@@ -78,7 +78,7 @@ export class DisplayName extends React.PureComponent<Props> {
     } else if (account) {
       let acct = account.get('acct');
 
-      if (acct.indexOf('@') === -1 && localDomain) {
+      if (!acct.includes('@') && localDomain) {
         acct = `${acct}@${localDomain}`;
       }
 

app/javascript/mastodon/components/short_number.tsx

@@ -29,12 +29,12 @@ export const ShortNumberRenderer: React.FC<ShortNumberProps> = ({
     );
   }
 
-  const customRenderer = children || renderer || null;
+  const customRenderer = children ?? renderer ?? null;
 
   const displayNumber = <ShortNumberCounter value={shortNumber} />;
 
   return (
-    customRenderer?.(displayNumber, pluralReady(value, division)) ||
+    customRenderer?.(displayNumber, pluralReady(value, division)) ??
     displayNumber
   );
 };

app/javascript/mastodon/features/emoji/emoji_compressed.d.ts

@@ -28,9 +28,10 @@ export type SearchData = [
   Emoji['unified'],
 ];
 
-export interface ShortCodesToEmojiData {
-  [key: ShortCodesToEmojiDataKey]: [FilenameData, SearchData];
-}
+export type ShortCodesToEmojiData = Record<
+  ShortCodesToEmojiDataKey,
+  [FilenameData, SearchData]
+>;
 export type EmojisWithoutShortCodes = FilenameData[];
 
 export type EmojiCompressed = [

app/javascript/mastodon/features/emoji/emoji_mart_data_light.ts

@@ -9,7 +9,7 @@ import emojiCompressed from './emoji_compressed';
 import { unicodeToUnifiedName } from './unicode_to_unified_name';
 
 type Emojis = {
-  [key in keyof ShortCodesToEmojiData]: {
+  [key in NonNullable<keyof ShortCodesToEmojiData>]: {
     native: BaseEmoji['native'];
     search: Search;
     short_names: Emoji['short_names'];

app/javascript/mastodon/features/home_timeline/components/column_settings.tsx

@@ -18,9 +18,9 @@ export const ColumnSettings: React.FC = () => {
   const dispatch = useAppDispatch();
   const onChange = useCallback(
     (key: string, checked: boolean) => {
-      void dispatch(changeSetting(['home', ...key], checked));
+      dispatch(changeSetting(['home', ...key], checked));
     },
-    [dispatch]
+    [dispatch],
   );
 
   return (

app/javascript/mastodon/locales/global_locale.ts

@@ -3,15 +3,19 @@ export interface LocaleData {
   messages: Record<string, string>;
 }
 
-let loadedLocale: LocaleData;
+let loadedLocale: LocaleData | undefined;
 
 export function setLocale(locale: LocaleData) {
   loadedLocale = locale;
 }
 
-export function getLocale() {
-  if (!loadedLocale && process.env.NODE_ENV === 'development') {
-    throw new Error('getLocale() called before any locale has been set');
+export function getLocale(): LocaleData {
+  if (!loadedLocale) {
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error('getLocale() called before any locale has been set');
+    } else {
+      return { locale: 'unknown', messages: {} };
+    }
   }
 
   return loadedLocale;

app/javascript/mastodon/locales/load_locale.ts

@@ -6,6 +6,7 @@ import { isLocaleLoaded, setLocale } from './global_locale';
 const localeLoadingSemaphore = new Semaphore(1);
 
 export async function loadLocale() {
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want to match empty strings
   const locale = document.querySelector<HTMLElement>('html')?.lang || 'en';
 
   // We use a Semaphore here so only one thing can try to load the locales at

app/javascript/mastodon/polyfills/base_polyfills.ts

@@ -4,7 +4,7 @@ import 'core-js/features/symbol';
 import 'core-js/features/promise/finally';
 import { decode as decodeBase64 } from '../utils/base64';
 
-if (!HTMLCanvasElement.prototype.toBlob) {
+if (!Object.hasOwn(HTMLCanvasElement.prototype, 'toBlob')) {
   const BASE64_MARKER = ';base64,';
 
   Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
@@ -17,7 +17,7 @@ if (!HTMLCanvasElement.prototype.toBlob) {
       const dataURL: string = this.toDataURL(type, quality);
       let data;
 
-      if (dataURL.indexOf(BASE64_MARKER) >= 0) {
+      if (dataURL.includes(BASE64_MARKER)) {
         const [, base64] = dataURL.split(BASE64_MARKER);
         data = decodeBase64(base64);
       } else {

app/javascript/mastodon/polyfills/index.ts

@@ -24,13 +24,15 @@ export function loadPolyfills() {
   // Latest version of Firefox and Safari do not have IntersectionObserver.
   // Edge does not have requestIdleCallback.
   // This avoids shipping them all the polyfills.
+  /* eslint-disable @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types */
   const needsExtraPolyfills = !(
     window.AbortController &&
     window.IntersectionObserver &&
     window.IntersectionObserverEntry &&
     'isIntersecting' in IntersectionObserverEntry.prototype &&
     window.requestIdleCallback
   );
+  /* eslint-enable @typescript-eslint/no-unnecessary-condition */
 
   return Promise.all([
     loadIntlPolyfills(),

app/javascript/mastodon/polyfills/intl.ts

@@ -80,6 +80,7 @@ async function loadIntlPluralRulesPolyfills(locale: string) {
 // }
 
 export async function loadIntlPolyfills() {
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we want to match empty strings
   const locale = document.querySelector('html')?.lang || 'en';
 
   // order is important here

app/javascript/mastodon/scroll.ts

@@ -38,11 +38,13 @@ const scroll = (
 const isScrollBehaviorSupported =
   'scrollBehavior' in document.documentElement.style;
 
-export const scrollRight = (node: Element, position: number) =>
-  isScrollBehaviorSupported
-    ? node.scrollTo({ left: position, behavior: 'smooth' })
-    : scroll(node, 'scrollLeft', position);
-export const scrollTop = (node: Element) =>
-  isScrollBehaviorSupported
-    ? node.scrollTo({ top: 0, behavior: 'smooth' })
-    : scroll(node, 'scrollTop', 0);
+export const scrollRight = (node: Element, position: number) => {
+  if (isScrollBehaviorSupported)
+    node.scrollTo({ left: position, behavior: 'smooth' });
+  else scroll(node, 'scrollLeft', position);
+};
+
+export const scrollTop = (node: Element) => {
+  if (isScrollBehaviorSupported) node.scrollTo({ top: 0, behavior: 'smooth' });
+  else scroll(node, 'scrollTop', 0);
+};

app/javascript/mastodon/store/middlewares/loading_bar.ts

@@ -16,7 +16,7 @@ const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [
 export const loadingBarMiddleware = (
   config: Config = {},
 ): Middleware<Record<string, never>, RootState> => {
-  const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
+  const promiseTypeSuffixes = config.promiseTypeSuffixes ?? defaultTypeSuffixes;
 
   return ({ dispatch }) =>
     (next) =>
@@ -32,7 +32,7 @@ export const loadingBarMiddleware = (
           if (action.type.match(isPending)) {
             dispatch(showLoading());
           } else if (
-            action.type.match(isFulfilled) ||
+            action.type.match(isFulfilled) ??
             action.type.match(isRejected)
           ) {
             dispatch(hideLoading());

app/javascript/mastodon/store/middlewares/sounds.ts

@@ -38,7 +38,7 @@ export const soundsMiddleware = (): Middleware<
   Record<string, never>,
   RootState
 > => {
-  const soundCache: { [key: string]: HTMLAudioElement } = {};
+  const soundCache: Record<string, HTMLAudioElement> = {};
 
   void ready(() => {
     soundCache.boop = createAudio([
@@ -56,9 +56,9 @@ export const soundsMiddleware = (): Middleware<
   return () =>
     (next) =>
     (action: AnyAction & { meta?: { sound?: string } }) => {
-      const sound = action?.meta?.sound;
+      const sound = action.meta?.sound;
 
-      if (sound && soundCache[sound]) {
+      if (sound && Object.hasOwn(soundCache, sound)) {
         play(soundCache[sound]);
       }
 

app/javascript/mastodon/utils/filters.ts

@@ -7,7 +7,7 @@ export const toServerSideType = (columnType: string) => {
     case 'account':
       return columnType;
     default:
-      if (columnType.indexOf('list:') > -1) {
+      if (columnType.includes('list:')) {
         return 'home';
       } else {
         return 'public'; // community, account, hashtag

app/javascript/mastodon/utils/numbers.ts

@@ -55,7 +55,7 @@ export function toShortNumber(sourceNumber: number): ShortNumber {
  */
 export function pluralReady(
   sourceNumber: number,
-  division: DecimalUnits,
+  division: DecimalUnits | null,
 ): number {
   if (division == null || division < DECIMAL_UNITS.HUNDRED) {
     return sourceNumber;

app/javascript/mastodon/uuid.ts

@@ -4,6 +4,5 @@ export function uuid(a?: string): string {
         (a as unknown as number) ^
         ((Math.random() * 16) >> ((a as unknown as number) / 4))
       ).toString(16)
-    : // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-      ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
+    : ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
 }

package.json

@@ -181,8 +181,8 @@
     "@types/uuid": "^9.0.0",
     "@types/webpack": "^4.41.33",
     "@types/yargs": "^17.0.24",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "babel-jest": "^29.5.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",