WIP '@typescript-eslint/no-unnecessary-condition'

eslint.config.mjs

@@ -1,6 +1,7 @@
+import { defineConfig } from 'eslint/config';
 import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
 import tsParser from '@typescript-eslint/parser';
-import tsPlugin from '@typescript-eslint/eslint-plugin';
 import babelPlugin from '@babel/eslint-plugin';
 import reactPlugin from 'eslint-plugin-react';
 import importPlugin from 'eslint-plugin-import';
@@ -11,7 +12,7 @@ import jestDomPlugin from 'eslint-plugin-jest-dom';
 import prettierConfig from 'eslint-config-prettier';
 import globals from 'globals';
 
-export default [
+export default defineConfig(
   // Global ignores
   {
     ignores: [
@@ -27,8 +28,8 @@ export default [
   // Base JavaScript config
   js.configs.recommended,
 
-  // TypeScript config
-  ...tsPlugin.configs['flat/recommended'],
+  // TypeScript config with type checking
+  ...tseslint.configs.recommendedTypeChecked,
 
   // React config
   reactPlugin.configs.flat.recommended,
@@ -50,6 +51,7 @@ export default [
         ecmaFeatures: {
           jsx: true,
         },
+        // Note: projectService is configured per file type below
       },
     },
     plugins: {
@@ -178,6 +180,40 @@ export default [
         },
       ],
       '@typescript-eslint/no-require-imports': 'off',
+
+      // Disable "no-unsafe" checks which complain about using "any" freely.
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
+
+      // Disable this one due to false positives when narrowing return types,
+      // see https://github.com/typescript-eslint/typescript-eslint/issues/6951
+      // (it can make `yarn ts` fail after `yarn lint-fix`)
+      '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+
+      '@typescript-eslint/no-unnecessary-condition': [
+        'error',
+        {
+          allowConstantLoopConditions: 'only-allowed-literals',
+          checkTypePredicates: true,
+        },
+      ],
+
+      // Consider enabling these in the future
+      '@typescript-eslint/unbound-method': 'off',
+      '@typescript-eslint/only-throw-error': 'off',
+      '@typescript-eslint/no-floating-promises': 'off',
+      '@typescript-eslint/require-await': 'off',
+      '@typescript-eslint/no-redundant-type-constituents': 'off',
+      '@typescript-eslint/no-misused-promises': 'off',
+      '@typescript-eslint/await-thenable': 'off',
+      '@typescript-eslint/restrict-plus-operands': 'off',
+      '@typescript-eslint/no-base-to-string': 'off',
+      '@typescript-eslint/restrict-template-expressions': 'off',
+      '@typescript-eslint/prefer-promise-reject-errors': 'off',
+      '@typescript-eslint/no-array-delete': 'off',
     },
     linterOptions: {
       // This property is specified both here in addition to the command line in
@@ -189,6 +225,23 @@ export default [
     },
   },
 
+  // TypeScript files - enable type checking
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+
+  // JavaScript files - disable type-aware rules (they can't run on JS anyway)
+  {
+    files: ['**/*.js', '**/*.mjs', '**/*.cjs'],
+    ...tseslint.configs.disableTypeChecked,
+  },
+
   // Source files - enable stricter TypeScript rules
   {
     files: ['src/**/*.ts', 'src/**/*.tsx'],
@@ -255,7 +308,7 @@ export default [
     },
   },
 
-  // __mocks__ directory configuration
+  // __mocks__ directory configuration - globals
   {
     files: ['__mocks__/**/*'],
     languageOptions: {
@@ -266,5 +319,5 @@ export default [
   },
 
   // Prettier config (must be last to override other formatting rules)
-  prettierConfig,
-];
+  prettierConfig
+);

package.json

@@ -184,6 +184,7 @@
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^39.0.0",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.44.0",
     "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2",

src/actions/profile-view.ts

@@ -1080,7 +1080,6 @@ export function isolateProcess(
       for (const localTrack of localTracks) {
         if (
           localTrack.type === 'thread' &&
-          localTrack.threadIndex !== undefined &&
           oldSelectedThreadIndexes.has(localTrack.threadIndex)
         ) {
           newSelectedThreadIndexes.add(localTrack.threadIndex);

src/actions/receive-profile.ts

@@ -1096,7 +1096,7 @@ async function _extractJsonFromResponse(
       message = 'The network request to load the profile was aborted.';
     } else if (fileType === 'application/json') {
       message = 'The profile’s JSON could not be decoded.';
-    } else if (fileType === null && arrayBuffer !== null) {
+    } else if (arrayBuffer !== null) {
       // If the content type is not specified, use a raw array buffer
       // to fallback to other supported profile formats.
       return arrayBuffer;
@@ -1163,10 +1163,6 @@ export function retrieveProfileOrZipFromUrl(
             serializedProfile,
             profileUrl
           );
-          if (profile === undefined) {
-            throw new Error('Unable to parse the profile.');
-          }
-
           await dispatch(loadProfile(profile, {}, initialLoad));
           break;
         }

src/app-logic/url-handling.ts

@@ -892,7 +892,7 @@ const _upgraders: {
     // will not be preserved.
     const transforms = parseTransforms(query.transforms);
 
-    if (!transforms || transforms.length === 0) {
+    if (transforms.length === 0) {
       // We don't have any transforms to upgrade.
       return;
     }

src/app-logic/web-channel.ts

@@ -96,6 +96,7 @@ export type ResponseFromBrowser =
   | GetSymbolTableResponse
   | QuerySymbolicationApiResponse
   | GetPageFaviconsResponse
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
   | OpenScriptInTabDebuggerResponse;
 
 type StatusQueryResponse = {

src/components/app/CompareHome.tsx

@@ -23,7 +23,7 @@ type State = {
 };
 
 class CompareHomeImpl extends PureComponent<Props, State> {
-  override state = { profile1: '', profile2: '' };
+  override state: State = { profile1: '', profile2: '' };
 
   handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;

src/components/app/FooterLinks.tsx

@@ -15,7 +15,7 @@ export class FooterLinks extends PureComponent<{}, State> {
     this.setState({ hide: true });
   };
 
-  override state = {
+  override state: State = {
     hide: false,
   };
 

src/components/app/Home.tsx

@@ -54,7 +54,7 @@ class ActionButtons extends React.PureComponent<
 > {
   _fileInput: HTMLInputElement | null = null;
 
-  override state = {
+  override state: ActionButtonsState = {
     isLoadFromUrlPressed: false,
   };
 
@@ -129,7 +129,7 @@ class LoadFromUrl extends React.PureComponent<
   LoadFromUrlProps,
   LoadFromUrlState
 > {
-  override state = {
+  override state: LoadFromUrlState = {
     value: '',
   };
 

src/components/app/KeyboardShortcut.tsx

@@ -23,7 +23,7 @@ type State = {
  * Display a list of shortcuts that overlays the screen.
  */
 export class KeyboardShortcut extends React.PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     isOpen: false,
     // The eslint error is a false positive due to how it's used, see the line:
     //  `focusAfterClosed.focus()`

src/components/app/ListOfPublishedProfiles.tsx

@@ -49,7 +49,7 @@ class PublishedProfile extends React.PureComponent<
   PublishedProfileProps,
   PublishedProfileState
 > {
-  override state = {
+  override state: PublishedProfileState = {
     confirmDialogIsOpen: false,
   };
 
@@ -162,7 +162,7 @@ type State = {
 export class ListOfPublishedProfiles extends PureComponent<Props, State> {
   _isMounted = false;
 
-  override state = {
+  override state: State = {
     uploadedProfileInformationList: null,
   };
 

src/components/app/MenuButtons/MetaInfo.tsx

@@ -55,7 +55,7 @@ type Props = ConnectedProps<{}, StateProps, DispatchProps>;
  * This component formats the profile's meta information into a dropdown panel.
  */
 class MetaInfoPanelImpl extends React.PureComponent<Props, State> {
-  override state = { showsMoreInfo: false };
+  override state: State = { showsMoreInfo: false };
 
   /**
    * This method provides information about the symbolication status, and a button

src/components/app/MenuButtons/Permalink.tsx

@@ -30,7 +30,7 @@ export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
     this._permalinkTextField = elem;
   };
 
-  override state = {
+  override state: State = {
     fullUrl: '',
     shortUrl: '',
   };

src/components/app/ProfileName.tsx

@@ -37,7 +37,7 @@ type State = {
  * state), and then when active, it switches to an input, which is only fixed in size.
  */
 class ProfileNameImpl extends React.PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     focusedWithKey: null,
     focusGeneration: 0,
   };

src/components/js-tracer/Canvas.tsx

@@ -90,7 +90,7 @@ const ROW_LABEL_OFFSET_LEFT: CssPixels = 5;
 const FONT_SIZE: CssPixels = 10;
 
 class JsTracerCanvasImpl extends React.PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     hasFirstDraw: false,
   };
   _textMeasurement: TextMeasurement | null = null;

src/components/js-tracer/Chart.tsx

@@ -175,7 +175,7 @@ class JsTracerChartLoader extends React.PureComponent<
   ChartLoaderProps,
   ChartLoaderState
 > {
-  override state = {
+  override state: ChartLoaderState = {
     // The loader needs to be mounted before rendering the chart, as it has expensive
     // selectors.
     readyToRenderExpensiveChart: false,

src/components/network-chart/NetworkChartRow.tsx

@@ -314,7 +314,7 @@ export class NetworkChartRow extends React.PureComponent<
   NetworkChartRowProps,
   State
 > {
-  override state = {
+  override state: State = {
     pageX: 0,
     pageY: 0,
     hovered: false,

src/components/shared/ButtonWithPanel/ArrowPanel.tsx

@@ -27,7 +27,7 @@ type State = {
 
 export class ArrowPanel extends React.PureComponent<Props, State> {
   closeTimeout: NodeJS.Timeout | null = null;
-  override state = {
+  override state: State = {
     open: false,
     isClosing: false,
     openGeneration: 0,

src/components/shared/Draggable.tsx

@@ -36,7 +36,7 @@ export class Draggable<T> extends React.PureComponent<Props<T>, State> {
     mouseMoveHandler: (param: MouseEvent) => void;
     mouseUpHandler: (param: MouseEvent) => void;
   } | null = null;
-  override state = {
+  override state: State = {
     dragging: false,
   };
 

src/components/shared/MarkerSettings.tsx

@@ -42,7 +42,7 @@ type State = {
 };
 
 class MarkerSettingsImpl extends PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     isMarkerFiltersMenuVisible: false,
     isFilterMenuVisibleOnMouseDown: false,
   };

src/components/shared/PanelSearch.tsx

@@ -19,7 +19,7 @@ type Props = {
 type State = { searchFieldFocused: boolean };
 
 export class PanelSearch extends React.PureComponent<Props, State> {
-  override state = { searchFieldFocused: false };
+  override state: State = { searchFieldFocused: false };
   _onSearchFieldIdleAfterChange = (value: string) => {
     this.props.onSearch(value);
   };

src/components/shared/Reorderable.tsx

@@ -65,7 +65,7 @@ export class Reorderable extends React.PureComponent<Props, State> {
     },
   };
 
-  override state = {
+  override state: State = {
     phase: 'RESTING' as const,
     manipulatingIndex: -1,
     destinationIndex: -1,

src/components/shared/TreeView.tsx

@@ -485,7 +485,7 @@ export class TreeView<
     initialWidth: CssPixels;
   } | null = null;
 
-  override state = {
+  override state: TreeViewState = {
     // This contains the current widths, while or after the user resizes them.
     fixedColumnWidths: null,
 

src/components/shared/VirtualList.tsx

@@ -260,7 +260,7 @@ export class VirtualList<Item> extends React.PureComponent<
   VirtualListState
 > {
   _container: { current: HTMLDivElement | null } = React.createRef();
-  override state = { scrollTop: 0, containerHeight: 0 };
+  override state: VirtualListState = { scrollTop: 0, containerHeight: 0 };
 
   override componentDidMount() {
     document.addEventListener('copy', this._onCopy, false);

src/components/shared/Warning.tsx

@@ -18,7 +18,7 @@ type State = {
 };
 
 export class Warning extends PureComponent<Props, State> {
-  override state = { isNoticeDisplayed: true };
+  override state: State = { isNoticeDisplayed: true };
 
   _onHideClick = () => {
     this.setState({

src/components/shared/WithSize.tsx

@@ -29,7 +29,7 @@ export function withSize<Props>(
   Wrapped: React.ComponentType<PropsWithSize<Props>>
 ): React.ComponentType<Props> {
   return class WithSizeWrapper extends React.PureComponent<Props, State> {
-    override state = { width: 0, height: 0 };
+    override state: State = { width: 0, height: 0 };
     _container: HTMLElement | null = null;
 
     override componentDidMount() {

src/components/shared/thread/SampleGraph.tsx

@@ -243,7 +243,7 @@ class ThreadSampleGraphCanvas extends React.PureComponent<CanvasProps> {
 }
 
 export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     hoveredPixelState: null,
     mouseX: 0,
     mouseY: 0,

src/components/timeline/FullTimeline.tsx

@@ -123,7 +123,7 @@ class TimelineSettingsHiddenTracks extends React.PureComponent<{
 }
 
 class FullTimelineImpl extends React.PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     initialSelected: null,
   };
 

src/components/timeline/Markers.tsx

@@ -312,7 +312,7 @@ type State = {
 };
 
 class TimelineMarkers extends React.PureComponent<Props, State> {
-  override state = {
+  override state: State = {
     hoveredMarkerIndex: null,
     mouseDownMarker: null,
     mouseX: 0,