chore(project): update TypeScript to v4.8.3

[joshblack]

This PR updates TypeScript to v4.8.3. Generally, the changes made were around calls to React.cloneElement when the child arg was unknown. This lead to errors in the shape:

Argument of type '...' is not assignable to parameter of type 'Partial<unknown> & Attributes'.

This comes up in React.Children.{map,toArray} calls if the children type is the more general type React.ReactNode instead of a specific type that cloneElement is expecting.

For example, consider a List component that expects ListItem children:

interface Props {
  children: React.ReactNode
}

function List({ children }: Props) {
  return (
    <ul>
      {React.Children.map(children, (child, index) => {
        return React.cloneElement(child, { index });
      })}
    </ul>
  );
}

interface ListItemProps {
  children: string
  index: number
}

function ListItem({ children, index }: ListItemProps) {
  // do something with index
  return <li>{children}</li>
}

This example would encounter the above error since the author is expecting the child to be of type ListItemProps.

To address this, I believe we need to narrow the type through type assertions and this is the approach the PR takes

function List({ children }: Props) {
  return (
    <ul>
      {React.Children.map(children, (child, index) => {
-        return React.cloneElement(child, { index });
+        return React.cloneElement(child as React.ReactElement<ListItemProps>, { index });
      })}
    </ul>
  );
}

[changeset-bot]

🦋 Changeset detected

Latest commit: 6f8b95d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	77.66 KB (+0.01% 🔺)
dist/browser.umd.js	78.32 KB (+0.02% 🔺)

[colebemis]

This seems reasonable 👍 Thanks for updating this, @joshblack!

Could these changes lead to runtime errors if these components are passed children that they don't expect? For example, would React.cloneElement(child as React.ReactElement<AvatarProps>, {size: 40}) cause problems if child is not React.ReactElement<AvatarProps>?