TypeScript：如何縮小/編寫復雜條件類型的保護？

Question

給定以下MultiselectValue條件類型，如何根據multiple的值或通過Comp中的守衛將其解析為LabeledValue<T>或Array<LabeledValue<T>> ？

export interface LabeledValue<T = unknown> {
  label: string;
  value: T;
}

export type MultiselectValue<T, Multiple> = Multiple extends (undefined | false)
  ? LabeledValue<T>
  : Array<LabeledValue<T>>;

export type MultiselectProps<T, Multiple extends boolean | undefined> = {
  multiple: Multiple;
  value: MultiselectValue<T, Multiple>;
}

Comp({
  multiple: true,
  value: [{ // tsc complains if not an array (as expected) because 'multiple' is 'true'
    label: 'Option 1',
    value: 5
  }]
});

function Comp<T, Multiple extends boolean | undefined = undefined>(props: MultiselectProps<T, Multiple>) {
  const { multiple, value } = props;

  if (multiple) {
    // value is an arrray here
  } else {
    // value is a string here
  }
}

TS Playground 鏈接

Answer 1

最簡單的方法是實際更改MultiselectProps的定義：

type MultiselectProps<T, Multiple extends boolean | undefined> = Multiple extends (undefined | false) ? {
  multiple: Multiple;
  value: LabeledValue<T>;
} : {
  multiple: Multiple;
  value: Array<LabeledValue<T>>;
};

現在，在 function 主體中， props是一個可區分的聯合（未解析類型），這意味着您可以像以前那樣縮小它。

操場