[code-infra] Remove a few ts-ignore comments

docs/data/joy/components/button-group/SplitButton.tsx

@@ -10,7 +10,7 @@ const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'
 
 export default function SplitButton() {
   const [open, setOpen] = React.useState(false);
-  const actionRef = React.useRef<() => void | null>(null);
+  const actionRef = React.useRef<(() => void) | null>(null);
   const anchorRef = React.useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
@@ -41,11 +41,9 @@ export default function SplitButton() {
           aria-label="select merge strategy"
           aria-haspopup="menu"
           onMouseDown={() => {
-            // @ts-ignore
             actionRef.current = () => setOpen(!open);
           }}
           onKeyDown={() => {
-            // @ts-ignore
             actionRef.current = () => setOpen(!open);
           }}
           onClick={() => {

docs/data/joy/components/drawer/DrawerFilters.js

@@ -183,7 +183,6 @@ export default function DrawerFilters() {
                             if (!event.target.checked) {
                               set.delete(index);
                             }
-
                             return [...set];
                           })
                         }

docs/data/joy/components/drawer/DrawerFilters.tsx

@@ -183,7 +183,6 @@ export default function DrawerFilters() {
                             if (!event.target.checked) {
                               set.delete(index);
                             }
-                            // @ts-ignore
                             return [...set];
                           })
                         }

docs/data/joy/components/snackbar/SnackbarCloseReason.tsx

@@ -37,7 +37,6 @@ export default function SnackbarCloseReason() {
         autoHideDuration={3000}
         open={open}
         onClose={(event, reason) => {
-          // @ts-ignore
           setReasons((prev) => [...new Set([...prev, reason])]);
         }}
         onUnmount={() => {

docs/next.config.mjs

@@ -2,7 +2,6 @@
 import * as path from 'path';
 import * as url from 'url';
 import * as fs from 'fs';
-// @ts-ignore
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { createRequire } from 'module';
 import { findPages } from './src/modules/utils/find.mjs';

docs/src/modules/sandbox/CodeSandbox.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import LZString from 'lz-string';
 import addHiddenInput from 'docs/src/modules/utils/addHiddenInput';
 import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';

package.json

@@ -125,6 +125,7 @@
     "@types/mocha": "^10.0.7",
     "@types/node": "^18.19.44",
     "@types/react": "^18.3.3",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",

packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts

@@ -41,8 +41,7 @@ function getSymbolDocumentation({
 
   const decl = symbol.getDeclarations();
   if (decl) {
-    // @ts-ignore
-    const comments = ts.getJSDocCommentsAndTags(decl[0]) as readonly any[];
+    const comments = ts.getJSDocCommentsAndTags(decl[0]);
     if (comments && comments.length === 1) {
       const commentNode = comments[0];
       if (ts.isJSDoc(commentNode)) {

packages/api-docs-builder/ApiBuilders/HookApiBuilder.ts

@@ -401,17 +401,14 @@ const extractInfoFromType = async (
   try {
     const exportedSymbol = project.exports[typeName];
     const type = project.checker.getDeclaredTypeOfSymbol(exportedSymbol);
-    // @ts-ignore
     const typeDeclaration = type?.symbol?.declarations?.[0];
     if (!typeDeclaration) {
       return [];
     }
 
     const properties: Record<string, ParsedProperty> = {};
-    // @ts-ignore
     const propertiesOnProject = type.getProperties();
 
-    // @ts-ignore
     await Promise.all(
       propertiesOnProject.map(async (propertySymbol) => {
         properties[propertySymbol.name] = await parseProperty(propertySymbol, project);

packages/mui-base/src/useButton/useButton.ts

@@ -200,7 +200,7 @@ export function useButton(parameters: UseButtonParameters = {}): UseButtonReturn
     }
     if (disabled) {
       buttonProps['aria-disabled'] = disabled as boolean;
-      buttonProps.tabIndex = focusableWhenDisabled ? tabIndex ?? 0 : -1;
+      buttonProps.tabIndex = focusableWhenDisabled ? (tabIndex ?? 0) : -1;
     }
   }
 

packages/mui-base/src/useSlider/useSlider.ts

@@ -712,7 +712,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       type: 'range',
       min: parameters.min,
       max: parameters.max,
-      step: parameters.step === null && parameters.marks ? 'any' : parameters.step ?? undefined,
+      step: parameters.step === null && parameters.marks ? 'any' : (parameters.step ?? undefined),
       disabled,
       ...externalProps,
       ...mergedEventHandlers,

packages/mui-joy/src/Tabs/Tabs.tsx

@@ -138,7 +138,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
   });
 
   return (
-    // @ts-ignore `defaultValue` between HTMLDiv and TabsProps is conflicted.
     <SlotRoot {...rootProps}>
       <TabsProvider value={contextValue}>
         <SizeTabsContext.Provider value={size}>{children}</SizeTabsContext.Provider>

packages/mui-material/src/ButtonBase/ButtonBase.test.js

@@ -17,6 +17,8 @@ import ButtonBase, { buttonBaseClasses as classes } from '@mui/material/ButtonBa
 import describeConformance from '../../test/describeConformance';
 import * as ripple from '../../test/ripple';
 
+/** @typedef {import('./ButtonBase').ButtonBaseActions} ButtonBaseActions */
+
 describe('<ButtonBase />', () => {
   const { render } = createRenderer();
 
@@ -575,9 +577,9 @@ describe('<ButtonBase />', () => {
         top: 20,
       }));
       await ripple.startTouch(getByRole('button'), { clientX: 10, clientY: 10 });
-      const rippleRipple = container.querySelector('.touch-ripple-ripple');
+      const rippleRipple = /** @type {Element} */ (container.querySelector('.touch-ripple-ripple'));
       expect(rippleRipple).not.to.equal(null);
-      // @ts-ignore
+
       const rippleStyle = window.getComputedStyle(rippleRipple);
       expect(rippleStyle).to.have.property('height', '101px');
       expect(rippleStyle).to.have.property('width', '101px');
@@ -604,8 +606,8 @@ describe('<ButtonBase />', () => {
       await ripple.startTouch(getByRole('button'), { clientX: 10, clientY: 10 });
       const rippleRipple = container.querySelector('.touch-ripple-ripple');
       expect(rippleRipple).not.to.equal(null);
-      // @ts-ignore
-      const rippleStyle = window.getComputedStyle(rippleRipple);
+
+      const rippleStyle = window.getComputedStyle(/** @type {Element} */ (rippleRipple));
       expect(rippleStyle).not.to.have.property('height', '101px');
       expect(rippleStyle).not.to.have.property('width', '101px');
     });
@@ -1196,12 +1198,12 @@ describe('<ButtonBase />', () => {
         </ButtonBase>,
       );
 
-      // @ts-ignore
-      expect(typeof buttonActionsRef.current.focusVisible).to.equal('function');
+      expect(
+        typeof (/** @type {ButtonBaseActions} */ (buttonActionsRef.current).focusVisible),
+      ).to.equal('function');
 
       await act(async () => {
-        // @ts-ignore
-        buttonActionsRef.current.focusVisible();
+        /** @type {ButtonBaseActions} */ (buttonActionsRef.current).focusVisible();
       });
 
       expect(getByText('Hello')).toHaveFocus();

packages/mui-material/src/Modal/useModal.ts

@@ -53,8 +53,7 @@ function useModal(parameters: UseModalParameters): UseModalReturnValue {
     rootRef,
   } = parameters;
 
-  // @ts-ignore internal logic
-  const modal = React.useRef<{ modalRef: HTMLDivElement; mount: HTMLElement }>({});
+  const modal = React.useRef<{ modalRef?: HTMLDivElement; mount?: HTMLElement }>({});
   const mountNodeRef = React.useRef<HTMLElement | null>(null);
   const modalRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(modalRef, rootRef);

packages/mui-material/src/PigmentContainer/PigmentContainer.tsx

@@ -100,7 +100,6 @@ const PigmentContainer = React.forwardRef(function PigmentContainer(
       fixed={fixed}
       maxWidth={maxWidth}
       {...(props as any)}
-      // @ts-ignore
       ref={ref}
     />
   );

packages/mui-material/src/Slider/useSlider.ts

@@ -243,8 +243,11 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
       // Clone the event to not override `target` of the original event.
       const nativeEvent = (event as React.SyntheticEvent).nativeEvent || event;
-      // @ts-ignore The nativeEvent is function, not object
-      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+
+      const clonedEvent = new (nativeEvent.constructor as typeof Event)(
+        nativeEvent.type,
+        nativeEvent,
+      );
 
       Object.defineProperty(clonedEvent, 'target', {
         writable: true,
@@ -714,7 +717,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
       type: 'range',
       min: parameters.min,
       max: parameters.max,
-      step: parameters.step === null && parameters.marks ? 'any' : parameters.step ?? undefined,
+      step: parameters.step === null && parameters.marks ? 'any' : (parameters.step ?? undefined),
       disabled,
       ...externalProps,
       ...mergedEventHandlers,

packages/mui-system/src/Grid/createGrid.tsx

@@ -234,7 +234,7 @@ export default function createGrid(
     wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
   };
 
-  // @ts-ignore internal logic for nested grid
+  // @ts-expect-error internal logic for nested grid
   Grid.muiName = 'Grid';
 
   return Grid;

packages/mui-system/src/cssVars/prepareCssVars.ts

@@ -24,7 +24,7 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
     disableCssColorScheme,
     colorSchemeSelector: selector,
   } = parserConfig;
-  // @ts-ignore - ignore components do not exist
+  // @ts-expect-error - ignore components do not exist
   const { colorSchemes = {}, components, defaultColorScheme = 'light', ...otherTheme } = theme;
   const {
     vars: rootVars,

packages/mui-utils/src/setRef/setRef.test.ts

@@ -32,7 +32,7 @@ describe('setRef', () => {
   });
 
   it('throws on legacy string refs', () => {
-    // @ts-ignore
+    // @ts-expect-error
     expect(() => setRef('stringRef1', 'proxy')).to.throw();
   });
 });