如何理解 NavLinkProps 接口？

Question

在如下的NavLinkProps接口（React Router v6）中，我相信它是用 Typescript 編寫的，但是當我查看 Typescript 文檔中的“接口”時，我看不出擁有聯合運算符“|”意味着什么在“children:”之后和“React.ReactNode”之前，如：

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

完整界面在這里。 . .

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);
}

TypeScript 文檔中的所有示例都只有聯合運算符“|” ** 在**第一種類型之后（如：

interface Foo {
  myType: string | number;
}

這與有什么不同？：

interface Foo {
  myType: | string | number;
}

Answer 1

沒有什么不同 - 只允許領先的運算符使多行類型更具可讀性。

我挖掘了 TypeScript 來源； 這是在#12386中實現的，所以它出現在 TS v2.1.4 中。 在#31265中進一步改進了主要運算符的解析。

考慮

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

對比

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

這使得foo看起來有點特別。