[Eslint] Enable no-empty-object-type

The {} type in TypeScript does not represent a empty object as one may
expect this makes it confusing to work with and use properly.
https://typescript-eslint.io/rules/no-empty-object-type/

Bug: 397260638
Change-Id: Ic2cc515ac729a76d652fca829082bb76c8b1f913
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6327458
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

eslint.config.mjs

@@ -13,13 +13,13 @@ import jsdocPlugin from 'eslint-plugin-jsdoc';
 import mochaPlugin from 'eslint-plugin-mocha';
 import rulesdirPlugin from 'eslint-plugin-rulesdir';
 import globals from 'globals';
-import {join} from 'path';
+import { join } from 'path';
 
 rulesdirPlugin.RULES_DIR = join(
-    import.meta.dirname,
-    'scripts',
-    'eslint_rules',
-    'lib',
+  import.meta.dirname,
+  'scripts',
+  'eslint_rules',
+  'lib',
 );
 
 /**
@@ -316,11 +316,11 @@ export default [
       parserOptions: {
         allowAutomaticSingleRunInference: true,
         project: join(
-            import.meta.dirname,
-            'config',
-            'typescript',
-            'tsconfig.eslint.json',
-            ),
+          import.meta.dirname,
+          'config',
+          'typescript',
+          'tsconfig.eslint.json',
+        ),
       },
     },
 
@@ -542,6 +542,13 @@ export default [
 
       '@typescript-eslint/no-unsafe-function-type': 'error',
 
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        {
+          allowInterfaces: 'with-single-extends',
+        },
+      ],
+
       'rulesdir/no-underscored-properties': 'error',
       'rulesdir/inline-type-imports': 'error',
 
@@ -550,12 +557,12 @@ export default [
         {
           // Enforce that any import of models/trace/trace.js names the import Trace.
           modulePath: join(
-              import.meta.dirname,
-              'front_end',
-              'models',
-              'trace',
-              'trace.js',
-              ),
+            import.meta.dirname,
+            'front_end',
+            'models',
+            'trace',
+            'trace.js',
+          ),
           importName: 'Trace',
         },
       ],
@@ -827,7 +834,7 @@ export default [
     rules: {
       // Not a useful rule for .d.ts files where we are
       // representing an existing module.
-      'import/no-default-export': 'off'
-    }
-  }
+      'import/no-default-export': 'off',
+    },
+  },
 ];

front_end/core/common/Settings.ts

@@ -756,7 +756,7 @@ export class VersionController {
       const newName = settingNames[oldName];
       const oldNameH = oldName + 'H';
 
-      let newValue: {}|null = null;
+      let newValue: object|null = null;
       const oldSetting = Settings.instance().createSetting(oldName, empty);
       if (oldSetting.get() !== empty) {
         newValue = newValue || {};

front_end/core/platform/MapUtilities.ts

@@ -82,6 +82,7 @@ export class Multimap<K, V> {
 /**
  * Gets value for key, assigning a default if value is falsy.
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export function getWithDefault<K extends {}, V>(
     map: WeakMap<K, V>|Map<K, V>, key: K, defaultValueFactory: (key?: K) => V): V {
   let value = map.get(key);

front_end/core/sdk/FrameManager.test.ts

@@ -80,7 +80,7 @@ describe('FrameManager', () => {
   function setupEventSink(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       frameManager: FrameManager, events: SDK.FrameManager.Events[]): Array<{type: string, data: any}> {
-    const dispatchedEvents: Array<{type: string, data: {}}> = [];
+    const dispatchedEvents: Array<{type: string, data: object}> = [];
     for (const event of events) {
       frameManager.addEventListener(event, e => dispatchedEvents.push({type: event || '', data: e.data}));
     }

front_end/models/trace/handlers/types.ts

@@ -7,7 +7,7 @@ import type * as ModelHandlers from './ModelHandlers.js';
 
 export interface Handler {
   reset(): void;
-  handleEvent(data: {}): void;
+  handleEvent(data: object): void;
   finalize(options?: Types.Configuration.ParseOptions): Promise<void>;
   data(): unknown;
   deps?(): HandlerName[];

front_end/models/trace/types/TraceEvents.ts

@@ -109,7 +109,7 @@ export interface CallFrame {
   url: string;
 }
 
-export function objectIsCallFrame(object: {}): object is CallFrame {
+export function objectIsCallFrame(object: object): object is CallFrame {
   return ('functionName' in object && typeof object.functionName === 'string') &&
       ('scriptId' in object && (typeof object.scriptId === 'string' || typeof object.scriptId === 'number')) &&
       ('columnNumber' in object && typeof object.columnNumber === 'number') &&

front_end/panels/application/KeyValueStorageItemsView.ts

@@ -85,9 +85,7 @@ export interface ViewInput {
   onDelete: (event: CustomEvent<HTMLElement>) => void;
 }
 
-export interface ViewOutput {}
-
-export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 /**
  * A helper typically used in the Application panel. Renders a split view
  * between a DataGrid displaying key-value pairs and a preview Widget.
@@ -106,7 +104,7 @@ export abstract class KeyValueStorageItemsView extends StorageItemsView {
       title: string, id: string, editable: boolean, view?: View,
       metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView) {
     if (!view) {
-      view = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
+      view = (input: ViewInput, _, target: HTMLElement) => {
         // clang-format off
         render(html `
             <devtools-split-view direction="column" sidebar-position="second" name="${id}-split-view-state">

front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -83,17 +83,16 @@ export interface ViewInput {
   onInitiatorMouseLeave: () => void;
 }
 
-export interface ViewOutput {}
-
-export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export class DeveloperResourcesListView extends UI.Widget.VBox {
   #items: SDK.PageResourceLoader.PageResource[] = [];
   #selectedItem: SDK.PageResourceLoader.PageResource|null = null;
   readonly #view: View;
   #filters: TextUtils.TextUtils.ParsedFilter[] = [];
-  constructor(view: View = (input, output, target) => {
-    // clang-format off
+  constructor(
+      view: View = (input, _, target) => {
+        // clang-format off
         render(html`
             <devtools-data-grid
               name=${i18nString(UIStrings.developerResources)}
@@ -158,21 +157,21 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
               </table>
             </devtools-data-grid>`,
             target, {host: input});
-    // clang-format on
-    function renderUrl(url: string): HTMLElement {
-      const outer = document.createElement('div');
-      UI.ARIAUtils.setHidden(outer, true);
-      outer.setAttribute('part', 'url-outer');
-      const domain = outer.createChild('div');
-      domain.setAttribute('part', 'url-prefix');
-      const path = outer.createChild('div');
-      path.setAttribute('part', 'url-suffix');
-      const splitURL = /^(.*)(\/[^/]*)$/.exec(url);
-      domain.textContent = splitURL ? splitURL[1] : url;
-      path.textContent = splitURL ? splitURL[2] : '';
-      return outer;
-    }
-  }) {
+        // clang-format on
+        function renderUrl(url: string): HTMLElement {
+          const outer = document.createElement('div');
+          UI.ARIAUtils.setHidden(outer, true);
+          outer.setAttribute('part', 'url-outer');
+          const domain = outer.createChild('div');
+          domain.setAttribute('part', 'url-prefix');
+          const path = outer.createChild('div');
+          path.setAttribute('part', 'url-suffix');
+          const splitURL = /^(.*)(\/[^/]*)$/.exec(url);
+          domain.textContent = splitURL ? splitURL[1] : url;
+          path.textContent = splitURL ? splitURL[2] : '';
+          return outer;
+        }
+      }) {
     super(true);
     this.#view = view;
     this.registerRequiredCSS(developerResourcesListViewStyles);

front_end/panels/elements/CSSValueTraceView.ts

@@ -23,11 +23,10 @@ export interface ViewInput {
   finalResult: Node[]|undefined;
   onToggle: () => void;
 }
-export interface ViewOutput {}
 
 export type View = (
     input: ViewInput,
-    output: ViewOutput,
+    output: object,
     target: HTMLElement,
     ) => void;
 
@@ -38,7 +37,7 @@ export class CSSValueTraceView extends UI.Widget.VBox {
   #substitutions: Node[][] = [];
 
   constructor(
-      view: View = (input, output, target):
+      view: View = (input, _, target):
           void => {
             const substitutionIcon = html`<span class=trace-line-icon aria-label="resolved to">\u21B3</span>`;
             const evalIcon = html`<span class=trace-line-icon aria-label="is equal to">\u003D</span>`;

front_end/panels/recorder/components/util.ts

@@ -18,11 +18,11 @@ export function assert<T>(
 export type Keys<T> = T extends T ? keyof T : never;
 
 export type RequiredKeys<T> = {
-  [K in keyof T] -?: {} extends Pick<T, K>? never : K;
+  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? never : K;
 }[keyof T];
 
 export type OptionalKeys<T> = {
-  [K in keyof T] -?: {} extends Pick<T, K>? K : never;
+  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? K : never;
 }[keyof T];
 
 export type DeepImmutable<T> = {