Notes

Generic Props in React and TypeScript to get rid of Children being Implicitly Any

Edit on GitHub

ReactJS
error TS7031: Binding element "children" implicitly has an "any" type.

If you have ever come across the error above, it usually happens in a situation where you have a wrapper element that will have children, but you don’t know all the other props it might be getting and are spreading them..

You can get rid of the error by typing the props you are spreading as generic props. Code would look like below:

 1import { ReactNode } from 'react'
 2
 3interface Props<T> {
 4  props: T
 5  children: ReactNode
 6}
 7
 8export default function CardList<T>({ children, ...rest }: Props<T>) {
 9  return (
10    <div {...rest}>
11      {children}
12    </div>
13  )
14}

Notes:

  • The usage of React.FC is discouraged and is officially removed from the CRA Typescript template.
  • With React 18, FC no longer provides children, so you have to type it yourself, and you can drop FC
Browse all topics