Fix TypeScript compiler issues

Author: colinrotherham

.storybook/manager.ts

@@ -2,9 +2,12 @@ import { addons } from '@storybook/manager-api';
 import nhsTheme from './theme';
 import { startCase, upperFirst } from 'lodash';
 
-const sentenceCase = (string) => {
-  if (typeof string !== 'string') return '';
-  return upperFirst(startCase(string).toLowerCase());
+const sentenceCase = (name = '') => {
+  if (!name || typeof name !== 'string') {
+    return '';
+  }
+
+  return upperFirst(startCase(name).toLowerCase());
 };
 
 addons.setConfig({

src/components/content-presentation/table/TableHelpers.ts

@@ -1,10 +1,11 @@
-import { Children, isValidElement, type ReactElement, type ReactNode } from 'react';
+import { Children, type ReactElement, type ReactNode } from 'react';
 import { TableCell, type TableCellProps } from './components/TableCell';
+import { childIsOfComponentType } from '#util/types/TypeGuards';
 
 export const isTableCell = (
   child: ReactNode,
 ): child is ReactElement<TableCellProps, typeof TableCell> => {
-  return isValidElement(child) && child.type === TableCell;
+  return childIsOfComponentType(child, TableCell);
 };
 
 export const getHeadingsFromChildren = (children?: ReactNode) => {

src/components/navigation/card/components/CardGroupItem.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import { Col } from '#components/layout';
+import { type FC } from 'react';
+import { Col, type ColProps } from '#components/layout';
 
-export const CardGroupItem: typeof Col = ({ className, ...rest }) => (
+export const CardGroupItem: FC<ColProps> = ({ className, ...rest }) => (
   <Col className={classNames('nhsuk-card-group__item', className)} {...rest} />
 );
 

src/util/types/TypeGuards.ts

@@ -1,33 +1,21 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
+  isValidElement,
   type FC,
-  type JSXElementConstructor,
+  type HTMLAttributes,
   type ReactElement,
   type ReactNode,
-  type ReactPortal,
 } from 'react';
 import { type CardType, type CareCardType } from './NHSUKTypes';
 
 /**
  * Assert that a child item is of the given component type.
  */
-export const childIsOfComponentType = (
-  child:
-    | string
-    | number
-    | boolean
-    | ReactElement<any, string | JSXElementConstructor<any>>
-    | Iterable<ReactNode>
-    | ReactPortal
-    | null
-    | undefined,
-  component: FC,
-): child is ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal =>
-  child !== undefined &&
-  child !== null &&
-  typeof child === 'object' &&
-  'type' in child &&
-  child.type === component;
+export const childIsOfComponentType = <T extends HTMLElement, P extends HTMLAttributes<T>>(
+  child: ReactNode,
+  component: FC<P>,
+): child is ReactElement<P, typeof component> => {
+  return isValidElement<typeof component>(child) && child.type === component;
+};
 
 /**
  * Check whether the given card type is that of a care card.