Apply lint rule @typescript-eslint/no-empty-object-type (#29159)

* Apply lint rule @typescript-eslint/no-empty-object-type

To avoid the footgun that is https://www.totaltypescript.com/the-empty-object-type-in-typescript

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

.eslintrc.js

@@ -200,8 +200,13 @@ module.exports = {
                 "@typescript-eslint/ban-ts-comment": "off",
                 // We're okay with assertion errors when we ask for them
                 "@typescript-eslint/no-non-null-assertion": "off",
-                // We do this sometimes to brand interfaces
-                "@typescript-eslint/no-empty-object-type": "off",
+                "@typescript-eslint/no-empty-object-type": [
+                    "error",
+                    {
+                        // We do this sometimes to brand interfaces
+                        allowInterfaces: "with-single-extends",
+                    },
+                ],
             },
         },
         // temporary override for offending icon require files
@@ -247,6 +252,7 @@ module.exports = {
                 // We don't need super strict typing in test utilities
                 "@typescript-eslint/explicit-function-return-type": "off",
                 "@typescript-eslint/explicit-member-accessibility": "off",
+                "@typescript-eslint/no-empty-object-type": "off",
 
                 // Jest/Playwright specific
 

playwright/pages/client.ts

@@ -25,6 +25,7 @@ import type {
     StateEvents,
     TimelineEvents,
     AccountDataEvents,
+    EmptyObject,
 } from "matrix-js-sdk/src/matrix";
 import type { RoomMessageEventContent } from "matrix-js-sdk/src/types";
 import { Credentials } from "../plugins/homeserver";
@@ -363,7 +364,7 @@ export class Client {
         event: JSHandle<MatrixEvent>,
         receiptType?: ReceiptType,
         unthreaded?: boolean,
-    ): Promise<{}> {
+    ): Promise<EmptyObject> {
         const client = await this.prepareClient();
         return client.evaluate(
             (client, { event, receiptType, unthreaded }) => {
@@ -386,7 +387,7 @@ export class Client {
      * @return {Promise} Resolves: {} an empty object.
      * @return {module:http-api.MatrixError} Rejects: with an error response.
      */
-    public async setDisplayName(name: string): Promise<{}> {
+    public async setDisplayName(name: string): Promise<EmptyObject> {
         const client = await this.prepareClient();
         return client.evaluate(async (cli: MatrixClient, name) => cli.setDisplayName(name), name);
     }
@@ -397,7 +398,7 @@ export class Client {
      * @return {Promise} Resolves: {} an empty object.
      * @return {module:http-api.MatrixError} Rejects: with an error response.
      */
-    public async setAvatarUrl(url: string): Promise<{}> {
+    public async setAvatarUrl(url: string): Promise<EmptyObject> {
         const client = await this.prepareClient();
         return client.evaluate(async (cli: MatrixClient, url) => cli.setAvatarUrl(url), url);
     }

src/@types/diff-dom.d.ts

@@ -18,6 +18,7 @@ declare module "diff-dom" {
         newValue: HTMLElement | string;
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     interface IOpts {}
 
     export class DiffDOM {

src/@types/matrix-js-sdk.d.ts

@@ -11,6 +11,7 @@ import type { BLURHASH_FIELD } from "../utils/image-media";
 import type { JitsiCallMemberEventType, JitsiCallMemberContent } from "../call-types";
 import type { ILayoutStateEvent, WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/types";
 import type { EncryptedFile } from "matrix-js-sdk/src/types";
+import type { EmptyObject } from "matrix-js-sdk/src/matrix";
 import type { DeviceClientInformation } from "../utils/device/types.ts";
 import type { UserWidget } from "../utils/WidgetUtils-types.ts";
 
@@ -35,7 +36,7 @@ declare module "matrix-js-sdk/src/types" {
         [JitsiCallMemberEventType]: JitsiCallMemberContent;
 
         // Unstable widgets state events
-        "im.vector.modular.widgets": IWidget | {};
+        "im.vector.modular.widgets": IWidget | EmptyObject;
         [WIDGET_LAYOUT_EVENT_TYPE]: ILayoutStateEvent;
 
         // Element custom state events
@@ -104,6 +105,6 @@ declare module "matrix-js-sdk/src/types" {
             // https://github.com/matrix-org/matrix-doc/pull/3246
             waveform?: number[];
         };
-        "org.matrix.msc3245.voice"?: {};
+        "org.matrix.msc3245.voice"?: EmptyObject;
     }
 }

src/@types/react.d.ts

@@ -10,7 +10,7 @@ import React, { PropsWithChildren } from "react";
 
 declare module "react" {
     // Fix forwardRef types for Generic components - https://stackoverflow.com/a/58473012
-    function forwardRef<T, P = {}>(
+    function forwardRef<T, P extends object>(
         render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
     ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 

src/AddThreepid.ts

@@ -249,6 +249,7 @@ export default class AddThreepid {
      * @param {{type: string, session?: string}} auth UI auth object
      * @return {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
      */
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     private makeAddThreepidOnlyRequest = (auth?: IAddThreePidOnlyBody["auth"] | null): Promise<{}> => {
         return this.matrixClient.addThreePidOnly({
             sid: this.sessionId!,

src/WorkerManager.ts

@@ -10,7 +10,7 @@ import { defer, IDeferred } from "matrix-js-sdk/src/utils";
 
 import { WorkerPayload } from "./workers/worker";
 
-export class WorkerManager<Request extends {}, Response> {
+export class WorkerManager<Request extends object, Response> {
     private readonly worker: Worker;
     private seq = 0;
     private pendingDeferredMap = new Map<number, IDeferred<Response>>();

src/autocomplete/QueryMatcher.ts

@@ -14,7 +14,7 @@ import { removeHiddenChars } from "matrix-js-sdk/src/utils";
 import { TimelineRenderingType } from "../contexts/RoomContext";
 import { Leaves } from "../@types/common";
 
-interface IOptions<T extends {}> {
+interface IOptions<T extends object> {
     keys: Array<Leaves<T>>;
     funcs?: Array<(o: T) => string | string[]>;
     shouldMatchWordsOnly?: boolean;
@@ -37,7 +37,7 @@ interface IOptions<T extends {}> {
  * @param {function[]} options.funcs List of functions that when called with the
  *     object as an arg will return a string to use as an index
  */
-export default class QueryMatcher<T extends {}> {
+export default class QueryMatcher<T extends object> {
     private _options: IOptions<T>;
     private _items = new Map<string, { object: T; keyWeight: number }[]>();
 

src/components/structures/AutoHideScrollbar.tsx

@@ -11,7 +11,7 @@ import classNames from "classnames";
 import React, { HTMLAttributes, ReactHTML, ReactNode, WheelEvent } from "react";
 
 type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
-    JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
+    JSX.IntrinsicElements[T] extends HTMLAttributes<object> ? DynamicElementProps<T> : DynamicElementProps<"div">;
 type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<Omit<JSX.IntrinsicElements[T], "ref">>;
 
 export type IProps<T extends keyof JSX.IntrinsicElements> = Omit<DynamicHtmlElementProps<T>, "onScroll"> & {

src/components/structures/NonUrgentToastContainer.tsx

@@ -7,19 +7,18 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import * as React from "react";
+import { EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import { ComponentClass } from "../../@types/common";
 import NonUrgentToastStore from "../../stores/NonUrgentToastStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 
-interface IProps {}
-
 interface IState {
     toasts: ComponentClass[];
 }
 
-export default class NonUrgentToastContainer extends React.PureComponent<IProps, IState> {
-    public constructor(props: IProps) {
+export default class NonUrgentToastContainer extends React.PureComponent<EmptyObject, IState> {
+    public constructor(props: EmptyObject) {
         super(props);
 
         this.state = {

src/components/structures/ToastContainer.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import * as React from "react";
 import classNames from "classnames";
 import { Text } from "@vector-im/compound-web";
+import { EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import ToastStore, { IToast } from "../../stores/ToastStore";
 
@@ -17,8 +18,8 @@ interface IState {
     countSeen: number;
 }
 
-export default class ToastContainer extends React.Component<{}, IState> {
-    public constructor(props: {}) {
+export default class ToastContainer extends React.Component<EmptyObject, IState> {
+    public constructor(props: EmptyObject) {
         super(props);
         this.state = {
             toasts: ToastStore.sharedInstance().getToasts(),

src/components/structures/auth/header/AuthHeaderProvider.tsx

@@ -24,7 +24,7 @@ interface AuthHeaderAction {
 
 export type AuthHeaderReducer = Reducer<ComponentProps<typeof AuthHeaderModifier>[], AuthHeaderAction>;
 
-export function AuthHeaderProvider({ children }: PropsWithChildren<{}>): JSX.Element {
+export function AuthHeaderProvider({ children }: PropsWithChildren): JSX.Element {
     const [state, dispatch] = useReducer<AuthHeaderReducer>(
         (state: ComponentProps<typeof AuthHeaderModifier>[], action: AuthHeaderAction) => {
             switch (action.type) {

src/components/views/audio_messages/Waveform.tsx

@@ -18,8 +18,6 @@ interface IProps {
     progress: number; // percent complete, 0-1, default 100%
 }
 
-interface IState {}
-
 /**
  * A simple waveform component. This renders bars (centered vertically) for each
  * height provided in the component properties. Updating the properties will update
@@ -28,7 +26,7 @@ interface IState {}
  * For CSS purposes, a mx_Waveform_bar_100pct class is added when the bar should be
  * "filled", as a demonstration of the progress property.
  */
-export default class Waveform extends React.PureComponent<IProps, IState> {
+export default class Waveform extends React.PureComponent<IProps> {
     public static defaultProps = {
         progress: 1,
     };

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -894,7 +894,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
     }
 }
 
-export class FallbackAuthEntry<T = {}> extends React.Component<IAuthEntryProps & T> {
+export class FallbackAuthEntry<T extends object> extends React.Component<IAuthEntryProps & T> {
     protected popupWindow: Window | null;
     protected fallbackButton = createRef<HTMLDivElement>();
 

src/components/views/auth/Welcome.tsx

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import classNames from "classnames";
+import { EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import SdkConfig from "../../../SdkConfig";
 import AuthPage from "./AuthPage";
@@ -16,9 +17,7 @@ import LanguageSelector from "./LanguageSelector";
 import EmbeddedPage from "../../structures/EmbeddedPage";
 import { MATRIX_LOGO_HTML } from "../../structures/static-page-vars";
 
-interface IProps {}
-
-export default class Welcome extends React.PureComponent<IProps> {
+export default class Welcome extends React.PureComponent<EmptyObject> {
     public render(): React.ReactNode {
         const pagesConfig = SdkConfig.getObject("embedded_pages");
         let pageUrl: string | undefined;

src/components/views/elements/EditableItemList.tsx

@@ -101,7 +101,7 @@ interface IProps {
     onNewItemChanged?(item: string): void;
 }
 
-export default class EditableItemList<P = {}> extends React.PureComponent<IProps & P> {
+export default class EditableItemList<P extends object> extends React.PureComponent<IProps & P> {
     protected onItemAdded = (e: ButtonEvent): void => {
         e.stopPropagation();
         e.preventDefault();

src/components/views/elements/StyledCheckbox.tsx

@@ -21,9 +21,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     id?: string;
 }
 
-interface IState {}
-
-export default class StyledCheckbox extends React.PureComponent<IProps, IState> {
+export default class StyledCheckbox extends React.PureComponent<IProps> {
     private id: string;
 
     public static readonly defaultProps = {

src/components/views/elements/StyledRadioButton.tsx

@@ -18,9 +18,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
     childrenInLabel?: boolean;
 }
 
-interface IState {}
-
-export default class StyledRadioButton extends React.PureComponent<IProps, IState> {
+export default class StyledRadioButton extends React.PureComponent<IProps> {
     public static readonly defaultProps = {
         className: "",
         childrenInLabel: true,

src/components/views/rooms/Autocomplete.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, KeyboardEvent, RefObject } from "react";
+import React, { createRef, RefObject } from "react";
 import classNames from "classnames";
 import { flatMap } from "lodash";
 import { Room } from "matrix-js-sdk/src/matrix";
@@ -206,7 +206,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         this.setSelection(1 + index);
     }
 
-    public onEscape(e: KeyboardEvent): boolean | undefined {
+    public onEscape(e: KeyboardEvent | React.KeyboardEvent): boolean | undefined {
         const completionCount = this.countCompletions();
         if (completionCount === 0) {
             // autocomplete is already empty, so don't preventDefault

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { createRef } from "react";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { EmptyObject, Room } from "matrix-js-sdk/src/matrix";
 import { CSSTransition } from "react-transition-group";
 
 import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
@@ -21,8 +21,6 @@ import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 
-interface IProps {}
-
 interface IState {
     // Both of these control the animation for the breadcrumbs. For details on the
     // actual animation, see the CSS.
@@ -59,11 +57,11 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v
     );
 };
 
-export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
+export default class RoomBreadcrumbs extends React.PureComponent<EmptyObject, IState> {
     private unmounted = false;
     private toolbar = createRef<HTMLDivElement>();
 
-    public constructor(props: IProps) {
+    public constructor(props: EmptyObject) {
         super(props);
 
         this.state = {

src/components/views/rooms/wysiwyg_composer/hooks/utils.ts

@@ -92,7 +92,7 @@ export function handleEventWithAutocomplete(
                 handled = true;
                 break;
             case KeyBindingAction.CancelAutocomplete:
-                autocompleteRef.current.onEscape(event as {} as React.KeyboardEvent);
+                autocompleteRef.current.onEscape(event);
                 handled = true;
                 break;
             default:

src/components/views/settings/CrossSigningPanel.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { ClientEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, EmptyObject, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 
@@ -33,10 +33,10 @@ interface IState {
     crossSigningReady?: boolean;
 }
 
-export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
+export default class CrossSigningPanel extends React.PureComponent<EmptyObject, IState> {
     private unmounted = false;
 
-    public constructor(props: {}) {
+    public constructor(props: EmptyObject) {
         super(props);
 
         this.state = {

src/components/views/settings/CryptographyPanel.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { lazy } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -19,8 +20,6 @@ import { SettingLevel } from "../../../settings/SettingLevel";
 import { SettingsSubsection, SettingsSubsectionText } from "./shared/SettingsSubsection";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
-interface IProps {}
-
 interface IState {
     /** The device's base64-encoded Ed25519 identity key, or:
      *
@@ -30,11 +29,11 @@ interface IState {
     deviceIdentityKey: string | undefined | null;
 }
 
-export default class CryptographyPanel extends React.Component<IProps, IState> {
+export default class CryptographyPanel extends React.Component<EmptyObject, IState> {
     public static contextType = MatrixClientContext;
     declare public context: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+    public constructor(props: EmptyObject, context: React.ContextType<typeof MatrixClientContext>) {
         super(props);
 
         if (!context.getCrypto()) {