时间戳

首页 > 解决方案 > 在 Typescript 中使用合并运算符

javascript - 在 Typescript 中使用合并运算符

问题描述

我需要格式化可以包含多种类型的数组元素：

interface OptionType {
  value: string | number | boolean
  label?: string | number | boolean
}
const inputArray : Array<number | string | boolean | OptionType> = [1, 2, { value: 3, label:'test' }]

我需要我的新数组的所有元素都是 OptionType 类型，所以我使用了这个：

const formattedArray = inputArray.map((option)=>({
  value : option.value ?? option,
  label: option.label ?? option.value?? option
}))

但是，我不断收到 Typescript 错误，例如提到“类型 'string' 上不存在属性 'label'”，我知道，这就是我为此使用 Null Coalescing Operator 的原因。

我之前尝试过使用基本检查：

 if (typeof option === 'string' || typeof option === 'number' || typeof option === 'boolean')

它有效，但我基本上失去了 ?? 的效用 操作员。

我错过了什么还是只是 Typescript 的正常操作？

标签： javascripttypescript

解决方案

直接回答您的问题：这是目前 TypeScript 的限制。请参阅此 GitHub 问题以阅读有关相关讨论的更多信息：https ://github.com/microsoft/TypeScript/issues/1260

这是您的示例的重构，它将满足编译器：

type BNS = boolean | number | string;

interface OptionType {
  value: BNS;
  label?: BNS;
}

const inputArray : Array<BNS | OptionType> = [1, 2, { value: 3, label:'test' }];

const formattedArray = inputArray.map(option => ({
  value : typeof option === 'object' ? option.value : option,
  label: typeof option === 'object' ? option.label ?? option.value : option,
}));

推荐阅读