diff --git a/packages/material-ui-utils/src/getDisplayName.ts b/packages/material-ui-utils/src/getDisplayName.ts index ee89819a172c00..84d7f637c7ff98 100644 --- a/packages/material-ui-utils/src/getDisplayName.ts +++ b/packages/material-ui-utils/src/getDisplayName.ts @@ -4,18 +4,16 @@ import { ForwardRef, Memo } from 'react-is'; // Simplified polyfill for IE 11 support // https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3 const fnNameMatchRegex = /^\s*function(?:\s|\s*\/\*.*\*\/\s*)+([^(\s/]*)\s*/; -export function getFunctionName(fn: any) { +export function getFunctionName(fn: Function): string { const match = `${fn}`.match(fnNameMatchRegex); const name = match && match[1]; return name || ''; } -/** - * @param {function} Component - * @param {string} fallback - * @returns {string | undefined} - */ -function getFunctionComponentName(Component: any, fallback = '') { +function getFunctionComponentName( + Component: React.FunctionComponent | React.ComponentClass, + fallback = '', +) { return Component.displayName || Component.name || getFunctionName(Component) || fallback; } @@ -30,11 +28,8 @@ function getWrappedName(outerType: any, innerType: any, wrapperName: string) { * cherry-pick from * https://github.com/facebook/react/blob/769b1f270e1251d9dbdce0fcbd9e92e502d059b8/packages/shared/getComponentName.js * originally forked from recompose/getDisplayName with added IE 11 support - * - * @param {React.ElementType} Component - * @returns {string | undefined} */ -export default function getDisplayName(Component: React.ElementType) { +export default function getDisplayName(Component: React.ElementType): string | undefined { if (Component == null) { return undefined; } @@ -47,15 +42,13 @@ export default function getDisplayName(Component: React.ElementType) { return getFunctionComponentName(Component, 'Component'); } + // TypeScript can't have components as objects but they exist in the form of `memo` or `Suspense` if (typeof Component === 'object') { - // @ts-ignore - switch (Component.$$typeof) { + switch ((Component as any).$$typeof) { case ForwardRef: - // @ts-ignore - return getWrappedName(Component, Component.render, 'ForwardRef'); + return getWrappedName(Component, (Component as any).render, 'ForwardRef'); case Memo: - // @ts-ignore - return getWrappedName(Component, Component.type, 'memo'); + return getWrappedName(Component, (Component as any).type, 'memo'); default: return undefined; }