Add stricter ESLint rules for Typescript files (#24926)

app/javascript/mastodon/components/animated_number.tsx

@@ -1,8 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import ShortNumber from './short_number';
+
 import { TransitionMotion, spring } from 'react-motion';
+
 import { reduceMotion } from '../initial_state';
 
+import ShortNumber from './short_number';
+
 const obfuscatedCount = (count: number) => {
   if (count < 0) {
     return 0;
@@ -13,10 +16,10 @@ const obfuscatedCount = (count: number) => {
   }
 };
 
-type Props = {
+interface Props {
   value: number;
   obfuscate?: boolean;
-};
+}
 export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
   const [previousValue, setPreviousValue] = useState(value);
   const [direction, setDirection] = useState<1 | -1>(1);
@@ -64,7 +67,11 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
                 transform: `translateY(${style.y * 100}%)`,
               }}
             >
-              {obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}
+              {obfuscate ? (
+                obfuscatedCount(data as number)
+              ) : (
+                <ShortNumber value={data as number} />
+              )}
             </span>
           ))}
         </span>

app/javascript/mastodon/components/avatar.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
+
 import classNames from 'classnames';
-import { autoPlayGif } from '../initial_state';
+
 import { useHovering } from '../../hooks/useHovering';
 import type { Account } from '../../types/resources';
+import { autoPlayGif } from '../initial_state';
 
-type Props = {
+interface Props {
   account: Account;
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
-};
+}
 
 export const Avatar: React.FC<Props> = ({
   account,

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import type { Account } from '../../types/resources';
+
 import { useHovering } from '../../hooks/useHovering';
+import type { Account } from '../../types/resources';
 import { autoPlayGif } from '../initial_state';
 
-type Props = {
+interface Props {
   account: Account;
   friend: Account;
   size?: number;
   baseSize?: number;
   overlaySize?: number;
-};
+}
 
 export const AvatarOverlay: React.FC<Props> = ({
   account,

app/javascript/mastodon/components/blurhash.tsx

@@ -1,14 +1,14 @@
-import { decode } from 'blurhash';
 import React, { useRef, useEffect } from 'react';
 
-type Props = {
+import { decode } from 'blurhash';
+
+interface Props extends React.HTMLAttributes<HTMLCanvasElement> {
   hash: string;
   width?: number;
   height?: number;
   dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
   children?: never;
-  [key: string]: any;
-};
+}
 const Blurhash: React.FC<Props> = ({
   hash,
   width = 32,
@@ -21,6 +21,7 @@ const Blurhash: React.FC<Props> = ({
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const canvas = canvasRef.current!;
+
     // eslint-disable-next-line no-self-assign
     canvas.width = canvas.width; // resets canvas
 

app/javascript/mastodon/components/display_name.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { autoPlayGif } from '..//initial_state';
-import Skeleton from './skeleton';
-import { Account } from '../../types/resources';
-import { List } from 'immutable';
 
-type Props = {
+import type { List } from 'immutable';
+
+import type { Account } from '../../types/resources';
+import { autoPlayGif } from '../initial_state';
+
+import Skeleton from './skeleton';
+
+interface Props {
   account: Account;
   others: List<Account>;
   localDomain: string;
-};
+}
 export class DisplayName extends React.PureComponent<Props> {
   handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
     currentTarget,

app/javascript/mastodon/components/domain.tsx

@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
+
+import type { InjectedIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
 import { IconButton } from './icon_button';
-import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   unblockDomain: {
@@ -9,11 +12,11 @@ const messages = defineMessages({
   },
 });
 
-type Props = {
+interface Props {
   domain: string;
   onUnblockDomain: (domain: string) => void;
   intl: InjectedIntl;
-};
+}
 const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
   const handleDomainUnblock = useCallback(() => {
     onUnblockDomain(domain);

app/javascript/mastodon/components/gifv.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
-type Props = {
+interface Props {
   src: string;
   key: string;
   alt?: string;
@@ -8,7 +8,7 @@ type Props = {
   width: number;
   height: number;
   onClick?: () => void;
-};
+}
 
 export const GIFV: React.FC<Props> = ({
   src,

app/javascript/mastodon/components/icon.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import classNames from 'classnames';
 
-type Props = {
+interface Props extends React.HTMLAttributes<HTMLImageElement> {
   id: string;
   className?: string;
   fixedWidth?: boolean;
   children?: never;
-  [key: string]: any;
-};
+}
+
 export const Icon: React.FC<Props> = ({
   id,
   className,

app/javascript/mastodon/components/icon_button.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
-import { Icon } from './icon';
-import { AnimatedNumber } from './animated_number';
 
-type Props = {
+import classNames from 'classnames';
+
+import { AnimatedNumber } from './animated_number';
+import { Icon } from './icon';
+
+interface Props {
   className?: string;
   title: string;
   icon: string;
@@ -25,11 +27,11 @@ type Props = {
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
-};
-type States = {
+}
+interface States {
   activate: boolean;
   deactivate: boolean;
-};
+}
 export class IconButton extends React.PureComponent<Props, States> {
   static defaultProps = {
     size: 18,

app/javascript/mastodon/components/icon_with_badge.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+
 import { Icon } from './icon';
 
 const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
-type Props = {
+interface Props {
   id: string;
   count: number;
   issueBadge: boolean;
   className: string;
-};
+}
 export const IconWithBadge: React.FC<Props> = ({
   id,
   count,

app/javascript/mastodon/components/logo.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import logo from 'mastodon/../images/logo.svg';
 
 export const WordmarkLogo: React.FC = () => (

app/javascript/mastodon/components/not_signed_in_indicator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 export const NotSignedInIndicator: React.FC = () => (

app/javascript/mastodon/components/radio_button.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import classNames from 'classnames';
 
-type Props = {
+interface Props {
   value: string;
   checked: boolean;
   name: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   label: React.ReactNode;
-};
+}
 
 export const RadioButton: React.FC<Props> = ({
   name,

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
+
+import type { InjectedIntl } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
@@ -187,16 +189,16 @@ const timeRemainingString = (
   return relativeTime;
 };
 
-type Props = {
+interface Props {
   intl: InjectedIntl;
   timestamp: string;
   year: number;
   futureDate?: boolean;
   short?: boolean;
-};
-type States = {
+}
+interface States {
   now: number;
-};
+}
 class RelativeTimestamp extends React.Component<Props, States> {
   state = {
     now: this.props.intl.now(),

app/javascript/mastodon/components/server_hero_image.tsx

@@ -1,13 +1,15 @@
 import React, { useCallback, useState } from 'react';
-import { Blurhash } from './blurhash';
+
 import classNames from 'classnames';
 
-type Props = {
+import { Blurhash } from './blurhash';
+
+interface Props {
   src: string;
   srcSet?: string;
   blurhash?: string;
   className?: string;
-};
+}
 
 export const ServerHeroImage: React.FC<Props> = ({
   src,

app/javascript/mastodon/components/verified_badge.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { Icon } from './icon';
 
-type Props = {
+interface Props {
   link: string;
-};
+}
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
     <Icon id='check' className='verified-badge__mark' />