javascript - 访问对象映射中不同类型的值

Question

我有一些数据，如下所示 -

    {
      System: 'VIT0056',
      Value: {
        Start: 3.3,
        End: 3.9
      },
      'Initial Range' : {
        'Start': '1/12/2022',
        'End': '31/12/2022',
      },
      Manager: 'Karl Woods',
      Location: 'Tokyo',
      Price: '$1.50',
    },

我目前正在像这样映射这个对象 -

 {Object.entries(data).map(([key, val]) => {
              if (key === 'Value') {
                return (
                  <S.ValueContainer key={key}>
                    <Label>{key}:</Label>
                    <Text size="small">** DO SOMETHING HERE TO SHOW VALUES **</Text>
                  </S.ValueContainer>
                )
              }

              if (key === 'Initial Range') {
                return (
                  <S.ValueContainer key={key}>
                    <Label>{key}:</Label>
                    <Text size="small">** DO SOMETHING HERE TO SHOW VALUES ** </Text>
                  </S.ValueContainer>
                )
              }

              return (
                <S.ValueContainer key={key}>
                  <Label>{key}:</Label>
                  <Text size="small">{val}</Text>
                </S.ValueContainer>
              )
            }
         )
      }

对于值和初始范围键，我希望能够像这样显示它们 -

值:3.3 - 3.9

初始范围:2022年12月1日至2022年12月31日

但是，由于这些值是嵌套对象，我在访问这些值时遇到了困难。

当我将它们放入 if 语句并尝试执行 val.Start 时，它告诉我 -

类型“string |”上不存在属性“Start”范围'。

但我知道我将在此 block 中访问的值只能是 Range 类型。有没有办法定义这个？

Answer 1

您可以使用 type assertion告诉你的编译器，该值实际上是一个 Range

<Text size="small">{(val as Range).Start} - {(val as Range).End}</Text>

或者您可以实现 ToString(value: string | Range) 函数

function ToString(value: string | Range) {
  //if value is a string, just return the value
  if (typeof value === "string") return value;

  //here the compiler knows it must be a Range
  //because it's not a string ...
  return `${value.Start} - ${value.End}`;
}

并在渲染中使用它

<Text size="small">{ToString(val)}</Text>

此外，您似乎也有不同类型的范围。因此，在使用 ToString() 方法时，您可能还需要对开始和结束属性进行类型检查

function ToString(value: string | Range) {
  if (typeof value === "string") return value;

  if (typeof value.Start === "number")
    return `${value.Start} - ${value.End}`;

 //here you know value is a range and
 //the properties of range are strings
 //(given both always have the same type

  //or apply appropriate formatting for your dates
  return `${value.Start} to ${value.End}`;

}

当然你也可以返回一些渲染图而不是仅仅返回字符串。如下例所示

function ToRender(value: string | Range) {
  //if value is a string, just return the value
  if (typeof value === "string") return (<div>{value}</div>);

  //here the compiler knows it must be a Range
  //because it's not a string ...
  return (<div><span>{value.Start}</span> to <span>{value.End}</span></div>)
}