[core] Switch from $ExpectError to @ts-expect-error (#21308)

mui · Jun 4, 2020 · 76a6aa8 · 76a6aa8
1 parent 594cfe5
commit 76a6aa8
Show file tree

Hide file tree

Showing 20 changed files with 175 additions and 163 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>