React typescript and children

Question

I try to dynamically check in typescript the types of react children components. The following code is working pretty well, however seems typescript does not want me to destructure children.

I get the Typescript error :

TS2339: Property 'type' does not exist on type 'ReactNode'.

What can i do t get rid of the typescript error instead of using // @ts-ignore.

import * as React from 'react';

    export interface AuxProps  { 
      children: React.ReactNode[]
    }

    export const Message: React.FC<AuxProps> = ({
      children,
    }: AuxProps) => {
      
      const test = children.filter(({ type }) => type === Test);

      return (
        <div>
          {test}
        <div/>
      );
    };

Answer 1

This is because the default ReactNode does not have the field type.

You can simply add that key by using the & functionality:

export interface AuxProps  { 
      children: (React.ReactNode & {type: string})[]
    }

This will add the type to the elements.