How to understand NavLinkProps Interface?-CodePudding

In the Interface for NavLinkProps (React Router v6) as below, I believe that's written in Typescript, but when I checked the Typescript documentation for "Interface", I couldn't see what it means to have a Union Operator "|" after "children:" and before "React.ReactNode", as in:

 children:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);

Full Interface is here . . .

export interface NavLinkProps
  extends Omit<LinkProps, "className" | "style" | "children"> {
  children:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  caseSensitive?: boolean;
  className?: string | ((props: { isActive: boolean }) => string | undefined);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: { isActive: boolean }) => React.CSSProperties);
}

All the examples in the TypeScript documentation only had the Union Operator "|" ** after** the first type (as in:

interface Foo {
  myType: string | number;
}

How is that different from?:

interface Foo {
  myType: | string | number;
}

CodePudding user response：

It's not different - a leading operator is just allowed to make multi-line types more readable.

I dug into the TypeScript sources; this was implemented in #12386, so it appeared in TS v2.1.4. Parsing of the leading operator was further improved in #31265.

Consider

type X = 
  | foo
  | bar
  | quux
  | spam
  | eggs;

type X = 
  foo
  | bar
  | quux
  | spam
  | eggs;

which makes it seem that foo is somehow special.