TypeScript: How To Set Types When Object Property Could Be Array Of Objects, or A Singular Object

Question

This file returns edges either as an array of objects or a singular object.

However, TypeScript doesn't accept my attempts at suggesting it could be an array or not.

As it is here, it errors on the map function - if I set edges in CategoriesProps to an array, then it errors on categories.edges.node.name

Any ideas on how to progress?

Thanks

type CategoriesProps = {
  categories: {
    edges: {
      length: number;
      node: {
        name: string;
      };
    };
  };
};

export default function Categories({ categories }: CategoriesProps) {
  return (
    <span className="ml-1">
      under
      {categories.edges.length > 0 ? (
        categories.edges.map((category, index) => (
          <span key={index} className="ml-1">
            {category.node.name}
          </span>
        ))
      ) : (
        <span className="ml-1">{categories.edges.node.name}</span>
      )}
    </span>
  );
}

k.tten · Accepted Answer · 2022-10-21 14:56:19Z

1

Change your check to Array.isArray:

type Edge = {
  length: number;
  node: {
    name: string;
  };
};

type CategoriesProps = {
  categories: {
    edges: Edge | Edge[];
  };
};

export default function Categories({ categories }: CategoriesProps) {
  return (
    <span className="ml-1">
      under
      {Array.isArray(categories.edges) ? (
        categories.edges.map((category, index) => (
          <span key={index} className="ml-1">
            {category.node.name}
          </span>
        ))
      ) : (
        <span className="ml-1">{categories.edges.node.name}</span>
      )}
    </span>
  );
}

This is how you should be checking for arrays in JavaScript anyways.

answered Oct 21, 2022 at 14:56

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jamesthemullet Over a year ago

Much appreciated...this does as expected.

Collectives™ on Stack Overflow

TypeScript: How To Set Types When Object Property Could Be Array Of Objects, or A Singular Object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related