[Typography] Fix typecheck for Typography with custom component (#18473)

Author: fyodor-e

packages/material-ui/src/Typography/Typography.d.ts

@@ -1,29 +1,39 @@
 import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
+import { OverrideProps, OverridableTypeMap, OverridableComponent } from '../OverridableComponent';
 import { ThemeStyle } from '../styles/createTypography';
 
 type Style = ThemeStyle | 'srOnly';
 
-export interface TypographyProps
-  extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
-  align?: PropTypes.Alignment;
-  color?:
-    | 'initial'
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'textPrimary'
-    | 'textSecondary'
-    | 'error';
-  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
-  display?: 'initial' | 'block' | 'inline';
-  gutterBottom?: boolean;
-  noWrap?: boolean;
-  paragraph?: boolean;
-  variant?: Style | 'inherit';
-  variantMapping?: Partial<Record<Style, string>>;
+export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'span'> {
+  props: P & {
+    align?: PropTypes.Alignment;
+    color?:
+      | 'initial'
+      | 'inherit'
+      | 'primary'
+      | 'secondary'
+      | 'textPrimary'
+      | 'textSecondary'
+      | 'error';
+    display?: 'initial' | 'block' | 'inline';
+    gutterBottom?: boolean;
+    noWrap?: boolean;
+    paragraph?: boolean;
+    variant?: Style | 'inherit';
+    variantMapping?: Partial<Record<Style, string>>;
+  };
+  defaultComponent: D;
+  classKey: TypographyClassKey;
 }
 
+declare const Typography: OverridableComponent<TypographyTypeMap>;
+
+export type TypographyProps<
+  D extends React.ElementType = TypographyTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<TypographyTypeMap<P, D>, D>;
+
 export type TypographyClassKey =
   | 'root'
   | 'h1'
@@ -54,6 +64,4 @@ export type TypographyClassKey =
   | 'displayInline'
   | 'displayBlock';
 
-declare const Typography: React.ComponentType<TypographyProps>;
-
 export default Typography;

packages/material-ui/src/Typography/typography.spec.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { Typography } from '@material-ui/core';
+
+const TypographyTest = () => {
+  const CustomComponent: React.FC<{ prop1: string; prop2: number }> = () => <div />;
+  return (
+    <div>
+      <Typography />
+      <Typography align="inherit" color="inherit" display="block" />
+      <Typography align="left" color="initial" display="inline" />
+      <Typography align="right" color="primary" display="initial" />
+      <Typography align="justify" color="secondary" display="initial" />
+      <Typography align="inherit" color="textPrimary" />
+      <Typography align="inherit" color="textSecondary" />
+      <Typography align="inherit" color="error" />
+      // $ExpectError
+      <Typography display="incorrectValue" />
+      <Typography component="a" href="url" display="block" />
+      <Typography component="label" htmlFor="html" display="block" />
+      // $ExpectError
+      <Typography component="a" href="url" display="incorrectValue" />
+      // $ExpectError
+      <Typography component="a" incorrectAttribute="url" />
+      // $ExpectError
+      <Typography component="incorrectComponent" href="url" />
+      // $ExpectError
+      <Typography component="div" href="url" />
+      // $ExpectError
+      <Typography href="url" />
+      <Typography component={CustomComponent} prop1="1" prop2={12} />
+      // $ExpectError
+      <Typography component={CustomComponent} prop1="1" prop2={12} id="1" />
+      // $ExpectError
+      <Typography component={CustomComponent} prop1="1" />
+      // $ExpectError
+      <Typography component={CustomComponent} prop1="1" prop2="12" />
+    </div>
+  );
+};