From 76a6aa8e94d53624c5600b5ae90c1f3aaf89c67a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 4 Jun 2020 11:12:14 +0200
Subject: [PATCH] [core] Switch from `$ExpectError` to `@ts-expect-error`
 (#21308)

---
 .../src/getThemeProps/getThemeProps.spec.ts   |  4 +-
 .../src/makeStyles/makeStyles.spec.tsx        | 10 +--
 .../src/styled/styled.spec.tsx                | 29 ++++----
 .../material-ui-styles/test/styles.spec.tsx   | 42 ++++++------
 .../material-ui-system/src/index.spec.tsx     | 14 ++--
 .../material-ui/src/Button/Button.spec.tsx    |  2 +-
 .../src/CardHeader/CardHeader.spec.tsx        | 50 +++++++-------
 .../src/CssBaseline/CssBaseline.spec.tsx      |  2 +-
 .../DialogContentText.spec.tsx                | 20 +++---
 .../src/ListItem/ListItem.spec.tsx            |  6 +-
 .../src/ListItemText/ListItemText.spec.tsx    | 24 +++----
 .../TablePagination/TablePagination.spec.tsx  |  4 +-
 .../src/TextField/TextField.spec.tsx          |  2 +-
 .../src/Typography/typography.spec.tsx        | 18 ++---
 .../src/styles/createPalette.spec.ts          |  6 +-
 .../withMobileDialog.spec.tsx                 |  4 +-
 .../typescript/OverridableComponent.spec.tsx  | 14 ++--
 .../test/typescript/components.spec.tsx       | 10 ++-
 .../test/typescript/hoc-interop.spec.tsx      | 10 +--
 .../test/typescript/styles.spec.tsx           | 67 ++++++++++---------
 20 files changed, 175 insertions(+), 163 deletions(-)

diff --git a/packages/material-ui-styles/src/getThemeProps/getThemeProps.spec.ts b/packages/material-ui-styles/src/getThemeProps/getThemeProps.spec.ts
index 46aa02a2a10562..82cab665979627 100644
--- a/packages/material-ui-styles/src/getThemeProps/getThemeProps.spec.ts
+++ b/packages/material-ui-styles/src/getThemeProps/getThemeProps.spec.ts
@@ -22,8 +22,8 @@ function Text(props: TextProps) {
 
 function Button(props: ButtonProps) {
   const { size } = getThemeProps({ name: 'Button', props });
-  // no theme provided
-  const { sigil } = getThemeProps({ name: 'Button', props }); // $ExpectError
+  // @ts-expect-error no theme provided
+  const { sigil } = getThemeProps({ name: 'Button', props });
 }
 
 function ThemedButton(props: ButtonProps) {
diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx
index cb5d82748233c3..3e254c40713795 100644
--- a/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx
+++ b/packages/material-ui-styles/src/makeStyles/makeStyles.spec.tsx
@@ -23,12 +23,12 @@ import { createStyles, makeStyles } from '@material-ui/styles';
 
   const MyComponent = (props: MyComponentProps) => {
     const { color, message } = props;
-    // Expected 1 argument, but got 0
-    const emptyClasses = useMyStyles(); // $ExpectError
+    // @ts-expect-error Expected 1 argument, but got 0
+    const emptyClasses = useMyStyles();
     const classes = useMyStyles(props);
-    // $ExpectError
+    // @ts-expect-error
     const invalidClasses = useMyStyles({ colourTypo: 'red' });
-    // $ExpectError
+    // @ts-expect-error
     const undefinedClassName = classes.toot;
 
     return (
@@ -108,7 +108,7 @@ import { createStyles, makeStyles } from '@material-ui/styles';
   });
 
   makeStyles(style, {
-    // $ExpectError
+    // @ts-expect-error
     defaultTheme: invalidCustomTheme,
   });
 
diff --git a/packages/material-ui-styles/src/styled/styled.spec.tsx b/packages/material-ui-styles/src/styled/styled.spec.tsx
index bcab9a0c3632c9..4ee389dece1cd7 100644
--- a/packages/material-ui-styles/src/styled/styled.spec.tsx
+++ b/packages/material-ui-styles/src/styled/styled.spec.tsx
@@ -18,15 +18,16 @@ function themeTest() {
   // prop 'theme' must not be required
   <ComponentStyled value={1} />;
   <ComponentStyledWithTheme value={1} />;
-  // error: property 'palette' is missing in type {}
-  <ComponentStyledWithTheme value={1} theme={{}} />; // $ExpectError
-  // error: property 'theme' is missing in type ... (because the component requires it)
-  <ComponentWithThemeStyled value={1} />; // $ExpectError
-  <ComponentWithThemeStyledWithTheme value={1} />; // $ExpectError
-  // error: property 'zIndex' is missing in type ...
-  <ComponentWithThemeStyledWithTheme value={1} theme={{ palette: { primary: '#333' } }} />; // $ExpectError
-  // error: property 'palette' is missing in type ...
-  <ComponentWithThemeStyledWithTheme value={1} theme={{ zIndex: { appBar: 500 } }} />; // $ExpectError
+  // @ts-expect-error property 'palette' is missing in type {}
+  <ComponentStyledWithTheme value={1} theme={{}} />;
+  // @ts-expect-error property 'theme' is missing in type ... (because the component requires it)
+  <ComponentWithThemeStyled value={1} />;
+  // @ts-expect-error property 'theme' is missing in
+  <ComponentWithThemeStyledWithTheme value={1} />;
+  // @ts-expect-error property 'zIndex' is missing in type ...
+  <ComponentWithThemeStyledWithTheme value={1} theme={{ palette: { primary: '#333' } }} />;
+  // @ts-expect-error property 'palette' is missing in type ...
+  <ComponentWithThemeStyledWithTheme value={1} theme={{ zIndex: { appBar: 500 } }} />;
   <ComponentWithThemeStyledWithTheme
     value={1}
     theme={{ zIndex: { appBar: 500 }, palette: { primary: '#333' } }}
@@ -41,10 +42,10 @@ function themeTest() {
 
   // prop 'theme' must not be required
   <ComponentWithOptionalThemeStyledWithTheme value={1} />;
-  // error: property 'palette' is missing in type {}
-  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{}} />; // $ExpectError
-  // error: property 'zIndex' is missing in type ...
-  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{ palette: { primary: '#333' } }} />; // $ExpectError
+  // @ts-expect-error error: property 'palette' is missing in type {}
+  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{}} />;
+  // @ts-expect-error error: property 'zIndex' is missing in type ...
+  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{ palette: { primary: '#333' } }} />;
 }
 
 function acceptanceTest() {
@@ -58,7 +59,7 @@ function acceptanceTest() {
     boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
   });
   const renderedStyledButton = <StyledButton classes={{ root: 'additional-root-class' }} />;
-  // $ExpectError
+  // @ts-expect-error
   const nonExistingClassKey = <StyledButton classes={{ notRoot: 'additional-root-class' }} />;
 
   interface MyTheme {
diff --git a/packages/material-ui-styles/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx
index 300d4c0f64dcf5..5981d04840a297 100644
--- a/packages/material-ui-styles/test/styles.spec.tsx
+++ b/packages/material-ui-styles/test/styles.spec.tsx
@@ -82,8 +82,8 @@ const StyledComponent = withStyles(styles)(({ theme, classes }: AllTheProps) =>
   <div className={classes.root}>{theme.palette.text.primary}</div>
 ));
 
-// missing prop theme
-<StyledComponent />; // $ExpectError
+// @ts-expect-error missing prop theme
+<StyledComponent />;
 
 const AllTheComposition = withTheme<Theme, typeof StyledComponent>(StyledComponent);
 
@@ -166,7 +166,7 @@ withStyles((theme) =>
     },
     '@media (min-width: 960px)': {
       content: {
-        // $ExpectError
+        // @ts-expect-error
         display: 'flex',
       },
     },
@@ -302,15 +302,18 @@ withStyles((theme) =>
   }
 
   class Component extends React.Component<Props & WithStyles<typeof styles>> {}
-  // $ExpectError
+  // @ts-expect-error
   const StyledComponent = withStyles(styles)(Component);
 
-  // implicit FunctionComponent
-  withStyles(styles)((props: Props) => null); // $ExpectError
-  withStyles(styles)((props: Props & WithStyles<typeof styles>) => null); // $ExpectError
-  withStyles(styles)((props: Props & { children?: React.ReactNode }) => null); // $ExpectError
+  // @ts-expect-error implicit FunctionComponent
+  withStyles(styles)((props: Props) => null);
+  // @ts-expect-error
+  withStyles(styles)((props: Props & WithStyles<typeof styles>) => null);
+  // @ts-expect-error
+  withStyles(styles)((props: Props & { children?: React.ReactNode }) => null);
   withStyles(styles)(
-    (props: Props & WithStyles<typeof styles> & { children?: React.ReactNode }) => null, // $ExpectError
+    // @ts-expect-error
+    (props: Props & WithStyles<typeof styles> & { children?: React.ReactNode }) => null,
   );
 
   // explicit not but with "Property 'children' is missing in type 'ValidationMap<Props>'".
@@ -319,8 +322,10 @@ withStyles((theme) =>
   const StatelessComponentWithStyles: React.FunctionComponent<Props & WithStyles<typeof styles>> = (
     props,
   ) => null;
-  withStyles(styles)(StatelessComponent); // $ExpectError
-  withStyles(styles)(StatelessComponentWithStyles); // $ExpectError
+  // @ts-expect-error
+  withStyles(styles)(StatelessComponent);
+  // @ts-expect-error
+  withStyles(styles)(StatelessComponentWithStyles);
 }
 
 {
@@ -355,8 +360,8 @@ withStyles((theme) =>
   const StyledMyButton = withStyles(styles)(MyButton);
 
   const CorrectUsage = () => <StyledMyButton nonDefaulted="2" />;
-  // Property 'nonDefaulted' is missing in type '{}'
-  const MissingPropUsage = () => <StyledMyButton />; // $ExpectError
+  // @ts-expect-error Property 'nonDefaulted' is missing in type '{}'
+  const MissingPropUsage = () => <StyledMyButton />;
 }
 
 {
@@ -387,8 +392,7 @@ withStyles((theme) =>
   const StyledMyComponent = withStyles(styles)(MyComponent);
   const renderedStyledMyComponent = <StyledMyComponent message="Hi" />;
 
-  //  number is not assignable to 'blue' | 'red'
-  // $ExpectError
+  // @ts-expect-error number is not assignable to 'blue' | 'red'
   interface InconsistentProps extends WithStyles<typeof styles> {
     color: number;
   }
@@ -407,8 +411,8 @@ function forwardRefTest() {
 
   const anchorRef = React.useRef<HTMLAnchorElement>(null);
   // forwarded to function components which can't hold refs
-  // property 'ref' does not exists
-  <StyledAnchor ref={anchorRef} />; // $ExpectError
+  // @ts-expect-error property 'ref' does not exists
+  <StyledAnchor ref={anchorRef} />;
   <StyledAnchor innerRef={anchorRef} />;
 
   const RefableAnchor = React.forwardRef<HTMLAnchorElement, WithStyles<typeof styles>>(
@@ -421,8 +425,8 @@ function forwardRefTest() {
 
   <StyledRefableAnchor ref={anchorRef} />;
   const buttonRef = React.createRef<HTMLButtonElement>();
-  // HTMLButtonElement is missing properties
-  <StyledRefableAnchor ref={buttonRef} />; // $ExpectError
+  // @ts-expect-error HTMLButtonElement is missing properties
+  <StyledRefableAnchor ref={buttonRef} />;
   // undesired: `innerRef` is currently typed as any but for backwards compat we're keeping it
   // especially since `innerRef` will be removed in v5 and is equivalent to `ref`
   <StyledRefableAnchor innerRef={buttonRef} />;
diff --git a/packages/material-ui-system/src/index.spec.tsx b/packages/material-ui-system/src/index.spec.tsx
index ce18c57e70fd56..4c68b1dafe58fe 100644
--- a/packages/material-ui-system/src/index.spec.tsx
+++ b/packages/material-ui-system/src/index.spec.tsx
@@ -20,10 +20,10 @@ function composeTest() {
   }
 
   const styler = compose(first, second);
-  // missing `spacing`
-  styler({ color: 'test' }); // $ExpectError
-  // missing `color`
-  styler({ spacing: 1 }); // $ExpectError
+  // @ts-expect-error missing `spacing`
+  styler({ color: 'test' });
+  // @ts-expect-error missing `color`
+  styler({ spacing: 1 });
   styler({ color: 'test', spacing: 1 });
 }
 
@@ -56,9 +56,11 @@ function cssRequiredTest() {
   const style = css(styleRequiredFunction);
   style({
     color: 'red',
-    css: {}, // $ExpectError
+    // @ts-expect-error
+    css: {},
   });
-  style({ css: { color: 'red' } }); // $ExpectError
+  // @ts-expect-error
+  style({ css: { color: 'red' } });
   style({ color: 'blue', css: { color: 'red' } });
 }
 
diff --git a/packages/material-ui/src/Button/Button.spec.tsx b/packages/material-ui/src/Button/Button.spec.tsx
index 362fcb23fdc9e5..3bc140974f1ba1 100644
--- a/packages/material-ui/src/Button/Button.spec.tsx
+++ b/packages/material-ui/src/Button/Button.spec.tsx
@@ -74,7 +74,7 @@ const ButtonTest = () => (
     </Button>
     {
       // Can't have an onClick handler if the overriding component doesn't specify one:
-      // $ExpectError
+      // @ts-expect-error
       <Button<typeof TestOverride> component={TestOverride} onClick={log}>
         TestOverride
       </Button>
diff --git a/packages/material-ui/src/CardHeader/CardHeader.spec.tsx b/packages/material-ui/src/CardHeader/CardHeader.spec.tsx
index 98e49411350ecb..e98951add7de39 100644
--- a/packages/material-ui/src/CardHeader/CardHeader.spec.tsx
+++ b/packages/material-ui/src/CardHeader/CardHeader.spec.tsx
@@ -18,7 +18,7 @@ function createElementBasePropMixedTest() {
   React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader, {
     component: CustomComponent,
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps<DefaultComponent, ComponentProp>>(CardHeader, {
     // This test shouldn't fail but does; stringProp & numberProp are required props of CustomComponent
     component: CustomComponent,
@@ -28,19 +28,19 @@ function createElementBasePropMixedTest() {
   React.createElement<CardHeaderProps>(CardHeader, {
     disableTypography: true,
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps<DefaultComponent, {}, React.ElementType>>(CardHeader, {
     unknownProp: 'shouldNotWork',
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps>(CardHeader, {
     disableTypography: 'hello',
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps>(CardHeader, {
     disableTypography: 1,
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps<any, ComponentProp>>(CardHeader, {
     component: 'incorrectElement',
   });
@@ -52,7 +52,7 @@ function createElementTypographyTest() {
       align: 'center',
     },
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps>(CardHeader, {
     titleTypographyProps: {
       align: 'incorrectAlign',
@@ -63,7 +63,7 @@ function createElementTypographyTest() {
       variant: 'body1',
     },
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps>(CardHeader, {
     titleTypographyProps: {
       variant: 123,
@@ -102,13 +102,13 @@ function createElementTypographyTest() {
       unknownProp: 'shouldNotWork',
     },
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps<DefaultComponent, {}, React.ElementType>>(CardHeader, {
     titleTypographyProps: {
       component: 'incorrectComponent',
     },
   });
-  // $ExpectError
+  // @ts-expect-error
   React.createElement<CardHeaderProps>(CardHeader, {
     titleTypographyProps: true,
   });
@@ -117,9 +117,9 @@ function createElementTypographyTest() {
 function componentPropTest() {
   <CardHeader component="div" />;
   <CardHeader component={CustomComponent} stringProp="string" numberProp={1} />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader component="incorrectComponent" />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader component={CustomComponent} />;
 }
 
@@ -143,15 +143,15 @@ function mixedCardHeaderComponentAndTypographyTest() {
       numberProp: 2,
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader component="incorrectComponent" />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader component={CustomComponent} />;
   <CardHeader
     component={CustomComponent}
     stringProp="string"
     numberProp={1}
-    // $ExpectError
+    // @ts-expect-error
     titleTypographyProps={{ component: CustomComponent, stringProp: 'stringProp' }}
     subheaderTypographyProps={{
       component: CustomComponent,
@@ -159,7 +159,7 @@ function mixedCardHeaderComponentAndTypographyTest() {
       numberProp: 2,
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader
     component={CustomComponent}
     stringProp="string"
@@ -168,7 +168,7 @@ function mixedCardHeaderComponentAndTypographyTest() {
     subheaderTypographyProps={{ component: CustomComponent, stringProp: 'stringProp' }}
   />;
   <CardHeader
-    // $ExpectError
+    // @ts-expect-error
     component="incorrectComponent"
     stringProp="string"
     numberProp={1}
@@ -182,7 +182,7 @@ function mixedCardHeaderComponentAndTypographyTest() {
 }
 
 function titleTypographyPropsTest() {
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader titleTypographyProps={{ component: 'incorrectComponent' }} />;
   <CardHeader titleTypographyProps={{ component: 'a', href: 'href' }} />;
   <CardHeader
@@ -199,7 +199,7 @@ function titleTypographyPropsTest() {
       variantMapping: { h1: 'h1' },
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader
     titleTypographyProps={{
       component: CustomComponent,
@@ -207,7 +207,7 @@ function titleTypographyPropsTest() {
       numberProp: '',
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader titleTypographyProps={{ component: CustomComponent, numberProp: 2 }} />;
   <CardHeader
     titleTypographyProps={{
@@ -245,9 +245,9 @@ function subheaderTypographyPropsTest() {
       propThatDoesntExist: 'shouldNotWork',
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader subheaderTypographyProps={{ component: 'incorrectComponent' }} />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader subheaderTypographyProps={{ component: CustomComponent, numberProp: 2 }} />;
 }
 
@@ -264,7 +264,7 @@ function mixedTypographyPropsTest() {
       numberProp: 2,
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader
     titleTypographyProps={{ component: 'incorrectComponent' }}
     subheaderTypographyProps={{ component: 'incorrectComponent' }}
@@ -281,19 +281,19 @@ function mixedTypographyPropsTest() {
       propThatDoesntExist: 'shouldNotWork',
     }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <CardHeader
     titleTypographyProps={{ component: CustomComponent, numberProp: 2 }}
     subheaderTypographyProps={{ component: CustomComponent, numberProp: 2 }}
   />;
   <CardHeader
-    // $ExpectError
+    // @ts-expect-error
     titleTypographyProps={{ component: CustomComponent, numberProp: 2 }}
     subheaderTypographyProps={{ component: CustomComponent, numberProp: 2, stringProp: 'yada' }}
   />;
   <CardHeader
     titleTypographyProps={{ component: CustomComponent, numberProp: 2, stringProp: 'yada' }}
-    // $ExpectError
+    // @ts-expect-error
     subheaderTypographyProps={{ component: CustomComponent, numberProp: 2 }}
   />;
 }
diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx b/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx
index c4eb765f3d2ba0..bc2c9feb638606 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.spec.tsx
@@ -18,7 +18,7 @@ import { createMuiTheme } from '@material-ui/core';
     overrides: {
       MuiCssBaseline: {
         '@global': {
-          // $ExpectError
+          // @ts-expect-error
           fontWeight: 'bold',
         },
       },
diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.spec.tsx b/packages/material-ui/src/DialogContentText/DialogContentText.spec.tsx
index 8c6fb57186d63f..cc00e887ae3a35 100644
--- a/packages/material-ui/src/DialogContentText/DialogContentText.spec.tsx
+++ b/packages/material-ui/src/DialogContentText/DialogContentText.spec.tsx
@@ -7,7 +7,7 @@ const DialogContentTextTest = () => {
     <div>
       <DialogContentText />
       <DialogContentText classes={{ root: 'rootClass' }} />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText classes={{ body1: 'body1Class' }} />
       <DialogContentText align="inherit" color="inherit" display="block" />
       <DialogContentText align="left" color="initial" display="inline" />
@@ -16,26 +16,26 @@ const DialogContentTextTest = () => {
       <DialogContentText align="inherit" color="textPrimary" />
       <DialogContentText align="inherit" color="textSecondary" />
       <DialogContentText align="inherit" color="error" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText display="incorrectValue" />
       <DialogContentText component="a" href="url" display="block" />
       <DialogContentText component="label" htmlFor="html" display="block" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component="a" href="url" display="incorrectValue" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component="a" incorrectAttribute="url" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component="incorrectComponent" href="url" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component="div" href="url" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText href="url" />
       <DialogContentText component={CustomComponent} prop1="1" prop2={12} />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component={CustomComponent} prop1="1" prop2={12} id="1" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component={CustomComponent} prop1="1" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <DialogContentText component={CustomComponent} prop1="1" prop2="12" />
     </div>
   );
diff --git a/packages/material-ui/src/ListItem/ListItem.spec.tsx b/packages/material-ui/src/ListItem/ListItem.spec.tsx
index 04695aa9048d4d..159d3b71d26374 100644
--- a/packages/material-ui/src/ListItem/ListItem.spec.tsx
+++ b/packages/material-ui/src/ListItem/ListItem.spec.tsx
@@ -7,8 +7,8 @@ function BooleanButtonTest() {
 
   function EditableItemFail(props: { editable: boolean }) {
     const { editable } = props;
-    // 'boolean' is not assignable to type 'true'
-    return <ListItem button={editable}>Editable? {editable}</ListItem>; // $ExpectError
+    // @ts-expect-error 'boolean' is not assignable to type 'true'
+    return <ListItem button={editable}>Editable? {editable}</ListItem>;
   }
 
   function EditableItemValid(props: { editable: boolean }) {
@@ -26,7 +26,7 @@ function MouseEnterTest() {
   <ListItem onMouseEnter={handleMouseEnter} />;
 
   function handleMouseEnterButton(event: React.MouseEvent<HTMLDivElement>) {}
-  // $ExpectError
+  // @ts-expect-error
   <ListItem onMouseEnter={handleMouseEnterButton} />; // desired: missing property button
   <ListItem button onMouseEnter={handleMouseEnterButton} />;
 }
diff --git a/packages/material-ui/src/ListItemText/ListItemText.spec.tsx b/packages/material-ui/src/ListItemText/ListItemText.spec.tsx
index c890ae97fb2101..6d7a59e42fcb5e 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.spec.tsx
+++ b/packages/material-ui/src/ListItemText/ListItemText.spec.tsx
@@ -4,20 +4,20 @@ import { ListItemText } from '@material-ui/core';
 const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
 
 function typographyPropsTest() {
-  // $ExpectError
+  // @ts-expect-error
   <ListItemText primaryTypographyProps={{ component: 'incorrectComponent' }} />;
   <ListItemText primaryTypographyProps={{ component: 'a', href: 'href' }} />;
   <ListItemText
     primaryTypographyProps={{
       component: 'a',
-      // $ExpectError
+      // @ts-expect-error
       htmlFor: 'not-existance-attribute',
     }}
   />;
   <ListItemText
     primaryTypographyProps={{ component: CustomComponent, prop1: 'prop1', prop2: 2 }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <ListItemText primaryTypographyProps={{ component: CustomComponent, prop2: 2 }} />;
   <ListItemText primaryTypographyProps={{ variant: 'h1' }} />;
   <ListItemText primaryTypographyProps={{ align: 'left' }} />;
@@ -33,20 +33,20 @@ function typographyPropsTest() {
 }
 
 function secondaryTypographyPropsTest() {
-  // $ExpectError
+  // @ts-expect-error
   <ListItemText secondaryTypographyProps={{ component: 'incorrectComponent' }} />;
   <ListItemText secondaryTypographyProps={{ component: 'a', href: 'href' }} />;
   <ListItemText
     secondaryTypographyProps={{
       component: 'a',
-      // $ExpectError
+      // @ts-expect-error
       htmlFor: 'not-existance-attribute',
     }}
   />;
   <ListItemText
     secondaryTypographyProps={{ component: CustomComponent, prop1: 'prop1', prop2: 2 }}
   />;
-  // $ExpectError
+  // @ts-expect-error
   <ListItemText secondaryTypographyProps={{ component: CustomComponent, prop2: 2 }} />;
   <ListItemText secondaryTypographyProps={{ variant: 'h1' }} />;
   <ListItemText secondaryTypographyProps={{ align: 'left' }} />;
@@ -63,9 +63,9 @@ function secondaryTypographyPropsTest() {
 
 function mixedTypographyPropsTest() {
   <ListItemText
-    // $ExpectError
+    // @ts-expect-error
     primaryTypographyProps={{ component: 'incorrectComponent' }}
-    // $ExpectError
+    // @ts-expect-error
     secondaryTypographyProps={{ component: 'incorrectComponent' }}
   />;
   <ListItemText
@@ -75,12 +75,12 @@ function mixedTypographyPropsTest() {
   <ListItemText
     primaryTypographyProps={{
       component: 'a',
-      // $ExpectError
+      // @ts-expect-error
       htmlFor: 'not-existance-attribute',
     }}
     secondaryTypographyProps={{
       component: 'a',
-      // $ExpectError
+      // @ts-expect-error
       htmlFor: 'not-existance-attribute',
     }}
   />;
@@ -89,9 +89,9 @@ function mixedTypographyPropsTest() {
     secondaryTypographyProps={{ component: CustomComponent, prop1: 'prop1', prop2: 2 }}
   />;
   <ListItemText
-    // $ExpectError
+    // @ts-expect-error
     primaryTypographyProps={{ component: CustomComponent, prop2: 2 }}
-    // $ExpectError
+    // @ts-expect-error
     secondaryTypographyProps={{ component: CustomComponent, prop2: 2 }}
   />;
 }
diff --git a/packages/material-ui/src/TablePagination/TablePagination.spec.tsx b/packages/material-ui/src/TablePagination/TablePagination.spec.tsx
index 808be4cd4acd46..e7e6861686197f 100644
--- a/packages/material-ui/src/TablePagination/TablePagination.spec.tsx
+++ b/packages/material-ui/src/TablePagination/TablePagination.spec.tsx
@@ -10,6 +10,6 @@ function classesTest() {
   };
 
   <TablePagination classes={{ actions: 'actions' }} {...defaultProps} />;
-  // desired
-  <TablePagination classes={{ alignCenter: 'center' }} {...defaultProps} />; // $ExpectError
+  // @ts-expect-error desired
+  <TablePagination classes={{ alignCenter: 'center' }} {...defaultProps} />;
 }
diff --git a/packages/material-ui/src/TextField/TextField.spec.tsx b/packages/material-ui/src/TextField/TextField.spec.tsx
index 441e9ee81dd226..7dfe7dd2f441cf 100644
--- a/packages/material-ui/src/TextField/TextField.spec.tsx
+++ b/packages/material-ui/src/TextField/TextField.spec.tsx
@@ -16,7 +16,7 @@ import TextField from '@material-ui/core/TextField';
         {
           // notchedOutline is only used with variant "outlined"
           // FIXME this no longer generates an error in TS 3.2, see https://github.com/Microsoft/TypeScript/issues/28926
-          // classes: { inputTypeSearch: 'search-input', notchedOutline: 'notched-outline' }, // $ExpectError
+          // classes: { inputTypeSearch: 'search-input', notchedOutline: 'notched-outline' }, // @ts-expect-error
         }
       }
     />
diff --git a/packages/material-ui/src/Typography/typography.spec.tsx b/packages/material-ui/src/Typography/typography.spec.tsx
index 5fa91780c73d8c..735e09b4182e78 100644
--- a/packages/material-ui/src/Typography/typography.spec.tsx
+++ b/packages/material-ui/src/Typography/typography.spec.tsx
@@ -13,26 +13,26 @@ const TypographyTest = () => {
       <Typography align="inherit" color="textPrimary" />
       <Typography align="inherit" color="textSecondary" />
       <Typography align="inherit" color="error" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography display="incorrectValue" />
       <Typography component="a" href="url" display="block" />
       <Typography component="label" htmlFor="html" display="block" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component="a" href="url" display="incorrectValue" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component="a" incorrectAttribute="url" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component="incorrectComponent" href="url" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component="div" href="url" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography href="url" />
       <Typography component={CustomComponent} prop1="1" prop2={12} />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component={CustomComponent} prop1="1" prop2={12} id="1" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component={CustomComponent} prop1="1" />
-      // $ExpectError
+      {/* @ts-expect-error */}
       <Typography component={CustomComponent} prop1="1" prop2="12" />
     </div>
   );
diff --git a/packages/material-ui/src/styles/createPalette.spec.ts b/packages/material-ui/src/styles/createPalette.spec.ts
index 2e67fb7e97280d..32d3df80f7ee85 100644
--- a/packages/material-ui/src/styles/createPalette.spec.ts
+++ b/packages/material-ui/src/styles/createPalette.spec.ts
@@ -18,9 +18,11 @@ import {
   palette.augmentColor(color, 400, 200, 600);
   palette.augmentColor(color, 400, undefined, 600);
   palette.augmentColor(option);
-  palette.augmentColor(option, 400); // $ExpectError
+  // @ts-expect-error
+  palette.augmentColor(option, 400);
   palette.augmentColor(colorOrOption);
-  palette.augmentColor(colorOrOption, 400); // $ExpectError
+  // @ts-expect-error
+  palette.augmentColor(colorOrOption, 400);
   const augmentedColor = palette.augmentColor(colorOrOption);
 }
 
diff --git a/packages/material-ui/src/withMobileDialog/withMobileDialog.spec.tsx b/packages/material-ui/src/withMobileDialog/withMobileDialog.spec.tsx
index b4af4e0d270100..126ca0eff01667 100644
--- a/packages/material-ui/src/withMobileDialog/withMobileDialog.spec.tsx
+++ b/packages/material-ui/src/withMobileDialog/withMobileDialog.spec.tsx
@@ -21,8 +21,8 @@ Component.defaultProps = {
   note: 'nothing special',
 };
 
-// Missing fullscreen, width
-<Component title="Not responsive yet!" />; // $ExpectError
+// @ts-expect-error Missing fullscreen, width
+<Component title="Not responsive yet!" />;
 
 const ResponsiveComponent = withMobileDialog()(Component);
 
diff --git a/packages/material-ui/test/typescript/OverridableComponent.spec.tsx b/packages/material-ui/test/typescript/OverridableComponent.spec.tsx
index 3257b187e006e7..660c3272aafc16 100644
--- a/packages/material-ui/test/typescript/OverridableComponent.spec.tsx
+++ b/packages/material-ui/test/typescript/OverridableComponent.spec.tsx
@@ -99,16 +99,16 @@ declare const Foo: OverridableComponent<{
 />;
 
 // ... but for an arbitrary ComponentType
-// $ExpectError
+// @ts-expect-error
 <Foo<typeof MyOverrideComponent> component={MyOverrideComponent} ref={() => {}} />;
 
-// $ExpectError
+// @ts-expect-error
 <Foo
   numberProp={3}
   bad="hi" // invalid prop
 />;
 
-// $ExpectError
+// @ts-expect-error
 <Foo
   component={MyOverrideComponent}
   myString={4} // should be a string
@@ -117,14 +117,14 @@ declare const Foo: OverridableComponent<{
 
 <Foo
   component={MyOverrideComponent}
-  // $ExpectError
+  // @ts-expect-error
   myCallback={(n) => console.log(n)} // n has type any
   numberProp={3}
 />;
 
 <Foo<typeof MyOverrideComponent>
   component={MyOverrideComponent}
-  // $ExpectError
+  // @ts-expect-error
   myString={4} // should be a string
   myCallback={(n) => {
     n; // $ExpectType number
@@ -132,7 +132,7 @@ declare const Foo: OverridableComponent<{
   numberProp={3}
 />;
 
-// $ExpectError
+// @ts-expect-error
 <Foo
   component={MyIncompatibleComponent1} // inconsistent typing of base vs override prop
   numberProp={3}
@@ -143,6 +143,6 @@ declare const Foo: OverridableComponent<{
   component="div"
   numberProp={3}
   // event type doesn't match component type
-  // $ExpectError
+  // @ts-expect-error
   onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
 />;
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index 47fe5e694e537e..bcdb45b89d2f6c 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -146,8 +146,7 @@ const AvatarTest = () => (
       alt="Image Alt"
       src="example.jpg"
     />
-    // onClick isn't allowed since we're overriding with a component that // doesn't have that prop:
-    // $ExpectError
+    {/* @ts-expect-error onClick isn't allowed since we're overriding with a component that doesn't have that prop: */}
     <Avatar component={TestOverride} onClick={log} />
   </div>
 );
@@ -610,8 +609,8 @@ const MenuTest = () => {
         action={(action) => {
           buttonActionRef.current = action;
         }}
-        // 'false' is not assignable to true | undefined
-        button={false} // $ExpectError
+        // @ts-expect-error 'false' is not assignable to true | undefined
+        button={false}
         ref={(elem) => {
           // inferred from `button={false}` instead of `action`
           elem; // $ExpectType HTMLLIElement | null
@@ -1079,8 +1078,7 @@ const refTest = () => {
       const j: number = (ref as HTMLInputElement).valueAsNumber;
       // unsafe casts, unsound usage, no runtime overhead
       const k: number = (ref as any).valueAsNumber;
-      // tslint:disable-next-line ban-ts-ignore
-      // @ts-ignore unsound usage, no runtime overhead, least syntax
+      // @ts-expect-error unsound usage, no runtime overhead, least syntax
       const n: number = ref.valueAsNumber;
     }}
   />;
diff --git a/packages/material-ui/test/typescript/hoc-interop.spec.tsx b/packages/material-ui/test/typescript/hoc-interop.spec.tsx
index 769c6ede8525ee..ab5ffa7fed1c91 100644
--- a/packages/material-ui/test/typescript/hoc-interop.spec.tsx
+++ b/packages/material-ui/test/typescript/hoc-interop.spec.tsx
@@ -21,7 +21,7 @@ const filledProps = {
 
 // baseline behavvior
 <TextField variant="filled" {...filledProps} />;
-// $ExpectError
+// @ts-expect-error
 <TextField {...filledProps} />; // desired to throw
 
 // styled
@@ -35,7 +35,7 @@ const filledProps = {
 {
   const StyledTextField = emotionStyled(TextField)``;
   <StyledTextField variant="filled" {...filledProps} />;
-  // $ExpectError
+  // @ts-expect-error
   <StyledTextField {...filledProps} />; // desired to throw
 }
 
@@ -45,7 +45,7 @@ const filledProps = {
   const RouterTextField: React.FunctionComponent<RouterTextFieldProps> = () => null;
   const TextFieldWithRouter = withRouter(RouterTextField);
   <TextFieldWithRouter variant="filled" {...filledProps} />;
-  // $ExpectError
+  // @ts-expect-error
   <TextFieldWithRouter {...filledProps} />; // desired
 }
 
@@ -59,8 +59,8 @@ const filledProps = {
 
   const StyledButton = withStyles(styles)(Button);
 
-  // undesired; caused by https://github.com/Microsoft/TypeScript/issues/26591
-  <StyledButton component="a" />; // $ExpectError
+  // @ts-expect-error undesired; caused by https://github.com/Microsoft/TypeScript/issues/26591
+  <StyledButton component="a" />;
 
   // workaround
   const UnsafeStyledButton = withStyles({ root: { color: 'ref' } })(Button) as typeof Button;
diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
index 0e238a41133e94..e996efc4918b0e 100644
--- a/packages/material-ui/test/typescript/styles.spec.tsx
+++ b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -157,7 +157,7 @@ const t1: number = createMuiTheme().spacing(1);
 const t2: string = createMuiTheme().spacing(1, 2);
 const t3: string = createMuiTheme().spacing(1, 2, 3);
 const t4: string = createMuiTheme().spacing(1, 2, 3, 4);
-// $ExpectError
+// @ts-expect-error
 const t5 = createMuiTheme().spacing(1, 2, 3, 4, 5);
 
 function OverridesTheme() {
@@ -181,8 +181,8 @@ const StyledComponent = withStyles(styles)(({ theme, classes }: AllTheProps) =>
   <div className={classes.root}>{theme.palette.text.primary}</div>
 ));
 
-// missing prop theme
-<StyledComponent />; // $ExpectError
+// @ts-expect-error missing prop theme
+<StyledComponent />;
 
 const AllTheComposition = withTheme(StyledComponent);
 
@@ -209,8 +209,8 @@ declare const themed: boolean;
   )(
     class extends React.Component<WithTheme> {
       hasRef() {
-        // innerRef does not exists, originally caused https://github.com/mui-org/material-ui/issues/14095
-        return Boolean(this.props.innerRef); // $ExpectError
+        // @ts-expect-error innerRef does not exists, originally caused https://github.com/mui-org/material-ui/issues/14095
+        return Boolean(this.props.innerRef);
       }
 
       render() {
@@ -269,7 +269,7 @@ withStyles((theme) =>
     },
     '@media (min-width: 960px)': {
       content: {
-        // $ExpectError
+        // @ts-expect-error
         display: 'flex',
       },
     },
@@ -403,7 +403,6 @@ withStyles((theme) =>
     text: theme.typography.body2,
   });
 }
-
 {
   // can't provide own `classes` type
   interface Props {
@@ -411,15 +410,18 @@ withStyles((theme) =>
   }
 
   class Component extends React.Component<Props & WithStyles<typeof styles>> {}
-  // $ExpectError
+  // @ts-expect-error
   const StyledComponent = withStyles(styles)(Component);
 
-  // implicit FunctionComponent
-  withStyles(styles)((props: Props) => null); // $ExpectError
-  withStyles(styles)((props: Props & WithStyles<typeof styles>) => null); // $ExpectError
-  withStyles(styles)((props: Props & { children?: React.ReactNode }) => null); // $ExpectError
+  // @ts-expect-error implicit FunctionComponent
+  withStyles(styles)((props: Props) => null);
+  // @ts-expect-error
+  withStyles(styles)((props: Props & WithStyles<typeof styles>) => null);
+  // @ts-expect-error
+  withStyles(styles)((props: Props & { children?: React.ReactNode }) => null);
   withStyles(styles)(
-    (props: Props & WithStyles<typeof styles> & { children?: React.ReactNode }) => null, // $ExpectError
+    // @ts-expect-error
+    (props: Props & WithStyles<typeof styles> & { children?: React.ReactNode }) => null,
   );
 
   // explicit not but with "Property 'children' is missing in type 'ValidationMap<Props>'".
@@ -428,8 +430,10 @@ withStyles((theme) =>
   const StatelessComponentWithStyles: React.FunctionComponent<Props & WithStyles<typeof styles>> = (
     props,
   ) => null;
-  withStyles(styles)(StatelessComponent); // $ExpectError
-  withStyles(styles)(StatelessComponentWithStyles); // $ExpectError
+  // @ts-expect-error
+  withStyles(styles)(StatelessComponent);
+  // @ts-expect-error
+  withStyles(styles)(StatelessComponentWithStyles);
 }
 
 {
@@ -464,8 +468,8 @@ withStyles((theme) =>
   const StyledMyButton = withStyles(styles)(MyButton);
 
   const CorrectUsage = () => <StyledMyButton nonDefaulted="2" />;
-  // Property 'nonDefaulted' is missing in type '{}'
-  const MissingPropUsage = () => <StyledMyButton />; // $ExpectError
+  // @ts-expect-error Property 'nonDefaulted' is missing in type '{}'
+  const MissingPropUsage = () => <StyledMyButton />;
 }
 
 {
@@ -583,15 +587,16 @@ withStyles((theme) =>
   // prop 'theme' must not be required
   <ComponentStyled value={1} />;
   <ComponentStyledWithTheme value={1} />;
-  // error: type {} is missing properties from 'Theme' ...
-  <ComponentStyledWithTheme value={1} theme={{}} />; // $ExpectError
-  // error: property 'theme' is missing in type ... (because the component requires it)
-  <ComponentWithThemeStyled value={1} />; // $ExpectError
-  <ComponentWithThemeStyledWithTheme value={1} />; // $ExpectError
-  // error: type {} is not assignable to type ...
-  <ComponentWithThemeStyledWithTheme value={1} theme={{}} />; // $ExpectError
-  // error: missing properties from type 'ZIndex' ...
-  <ComponentWithThemeStyledWithTheme value={1} theme={{ zIndex: { appBar: 100 } }} />; // $ExpectError
+  // @ts-expect-error type {} is missing properties from 'Theme' ...
+  <ComponentStyledWithTheme value={1} theme={{}} />;
+  // @ts-expect-error property 'theme' is missing in type ... (because the component requires it)
+  <ComponentWithThemeStyled value={1} />;
+  // @ts-expect-error
+  <ComponentWithThemeStyledWithTheme value={1} />;
+  // @ts-expect-error type {} is not assignable to type ...
+  <ComponentWithThemeStyledWithTheme value={1} theme={{}} />;
+  // @ts-expect-error missing properties from type 'ZIndex' ...
+  <ComponentWithThemeStyledWithTheme value={1} theme={{ zIndex: { appBar: 100 } }} />;
 
   const ComponentWithOptionalTheme: React.FC<{
     theme?: { zIndex: { [k: string]: number } };
@@ -602,10 +607,10 @@ withStyles((theme) =>
 
   // prop 'theme' must not be required
   <ComponentWithOptionalThemeStyledWithTheme value={1} />;
-  // error: property 'zIndex' is missing in type {}
-  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{}} />; // $ExpectError
-  // error: missing properties from type 'Theme' ...
-  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{ zIndex: { appBar: 100 } }} />; // $ExpectError
+  // @ts-expect-error property 'zIndex' is missing in type {}
+  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{}} />;
+  // @ts-expect-error missing properties from type 'Theme' ...
+  <ComponentWithOptionalThemeStyledWithTheme value={1} theme={{ zIndex: { appBar: 100 } }} />;
 }
 
 {
@@ -647,7 +652,7 @@ withStyles((theme) =>
 
 function themeProviderTest() {
   <ThemeProvider theme={{ foo: 1 }}>{null}</ThemeProvider>;
-  // $ExpectError
+  // @ts-expect-error
   <ThemeProvider<Theme> theme={{ foo: 1 }}>{null}</ThemeProvider>;
   <ThemeProvider<Theme> theme={{ props: { MuiAppBar: { 'aria-atomic': 'true' } } }}>
     {null}