使用Typescript区分react-select onchange中的单个选项和多个选项

Question

当 react-select 的 isMulti 的值是动态的时 onchange 的参数类型是...

(parameter) x: MultiValue<{
    value: string | null;
    label: string;
}> | SingleValue<{
    value: string | null;
    label: string;
}>

在这个事件的处理程序中，我该如何处理这两种情况？即单数和多数？

我试过了...

onChange={(x) => {
                
   if (typeof x === "MultiValue<{ value: string | null; label string;}")  {

   }
}

...它说...

This condition will always return 'false' since the types '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"' and '"MultiValue<{ value: string | null; label string;}"' have no overlap.ts(2367)

Answer 1

MultiValue 似乎只是数组的特殊名称（或 array-like）。

你可以只使用：

if (Array.isArray(x)) {
  // Is MultiValue
} else {
  // Is SingleValue
}

如果我们看一下定义，果然...

type MultiValue<Option> = readonly Option[];

另一种解决方案是类型保护：

function isMultiValue<T>(arg: MultiValue<T> | SingleValue<T>): arg is MultiValue<T> {
    return Array.isArray(arg);
}

如果可能的话，它会把类型缩小到MultiValue<T>，否则就是SingleValue<T>:

if (isMultiValue(value)) {
    value
//  ^? // MultiValue<...>
} else {
    value
//  ^? // SingleValue<...>
}

Playground demo

使用Typescript区分react-select onchange中的单个选项和多个选项

Differentiate between single and multiple options in react-select onchange using Typescript

typescript

react-select