Typescript：function 的返回類型為多種類型中的一種屬性的類型

Question

declare type Foo = {
  fieldA?: 'a' | 'b' | 'c';
  fieldB?: SomeOtherType;
  fieldC?: number;
  fieldD?: string;
  fieldE?: boolean;
}

declare type Bar = {
  fieldX?: boolean;
  fieldY?: 'hello' | 'world'
  fieldZ?: AndYetAnotherType;
}

const getPropertyFromFooOrBar = (
  property: string,
  foo: Foo,
  bar: Bar
): MISSING_TYPE => {
  return foo[property] || bar[property] || undefined;
};

我需要 function （上面的MISSING_TYPE ）的返回類型是來自Foo或Bar （或undefined ）的值。 有沒有類似於keyof Bar的東西可以用來處理這種打字？

Answer 1

您可以通過創建聯合類型並在泛型類型聲明中使用該聯合類型的 keyof 來確定組合類型的屬性的類型。 這是一個令人困惑的句子 - 以下是以下示例中所采取的步驟：

• 首先，聲明了一個名為FooAndBar的聯合類型。 這不是必需的，但它使事情更具可讀性。
• 為派生自交集類型的鍵的 function 創建了一個泛型類型參數。
• 使用該泛型類型聲明屬性參數。
• 為了避免編譯器問題，將兩個對象組合在一起。 這樣它們就符合FooAndBar類型的簽名。
• 因為類型是組合的，所以我可以在索引器中使用屬性的值。 該值將在組合類型中被罰款或返回未定義。
• 示例調用的返回類型將是'a' | 'b' | 'c'，因為語言服務發現fieldA是帶有'a'的Foo的屬性 | 'b' | 'c'作為它的類型。

type FooAndBar = Foo & Bar;

const getPropertyFromFooOrBar = <T extends keyof FooAndBar>(
  property: T,
  foo: Foo,
  bar: Bar
): FooAndBar[T] | undefined => {
  return { ...foo, ... bar }[property];
};

getPropertyFromFooOrBar('fieldA', { fieldA: 'a' }, { fieldY: 'hello' });
// getPropertyFromFooOrBar: <"fieldA">(property: "fieldA", foo: Foo, bar: Bar) => "a" | "b" | "c"

Answer 2

我最終選擇了以下內容：

declare type Foo = {
  fieldA?: 'a' | 'b' | 'c';
  fieldB?: SomeOtherType;
  fieldC?: number;
  fieldD?: string;
  fieldE?: boolean;
}

declare type Bar = {
  fieldX?: boolean;
  fieldY?: 'hello' | 'world'
  fieldZ?: AndYetAnotherType;
}

type FooValue = Foo[keyof Foo];
type BarValue = Bar[keyof Bar];

const getPropertyFromFooOrBar = (
  property: string,
  foo: Foo,
  bar: Bar
): FooValue | BarValue | undefined => {
  return foo[property] || bar[property] || undefined;
};