flattenChildren.ts

type NullElement = null | undefined;

type BasicElement = number | boolean | string;

type ArrayElement = Array<VElement>;

type ObjectElement = {
  props: {
    children?: ArrayElement;
  };
};

type VElement = NullElement | BasicElement | ArrayElement | ObjectElement;

type Children = ArrayElement;

type FlatChildren = Array<BasicElement>;

const isBasicElement = (child: VElement): child is BasicElement => {
  return (
    typeof child === "string" ||
    typeof child === "number" ||
    typeof child === "boolean"
  );
};

const isArrayElement = (child: VElement): child is ArrayElement => {
  return Array.isArray(child);
};

const isObjectElement = (child: VElement): child is ObjectElement => {
  return (
    typeof child === "object" &&
    !isArrayElement(child) &&
    Array.isArray(child?.props?.children)
  );
};

const isNullElement = (child: VElement): child is NullElement => {
  return child == null;
};

const flattenChildren = (children: Children): FlatChildren => {
  return children.reduce<FlatChildren>((flatChildren, child) => {
    if (isBasicElement(child)) {
      return [...flatChildren, child];
    }

    if (isArrayElement(child)) {
      return [...flatChildren, ...flattenChildren(child)];
    }

    if (isObjectElement(child)) {
      return [...flatChildren, ...flattenChildren(child.props.children ?? [])];
    }

    return flatChildren;
  }, []);
};

const children: Children = [
  1,
  null,
  [2, 3],
  {
    props: {
      children: [4, 5],
    },
  },
];

console.log(flattenChildren(children));
// [1, 2, 3, 4, 5]