打字稿实现条件道具

Question

我有以下组件，它可以包含图像或文本。因此在 JSX 中我检查是否有图像（因为这意味着不能有文本，反之亦然），然后显示图像或文本。

如何使用 TypeScript 类型定义这种行为？

我BlockCtaDoubleData，始终可用，EITHER BlockCtaDoubleImageData OR BlockCtaDoubleTextData。

我尝试了以下方法，但 Typescript 不断为 props.text 和 props.image 抛出错误，但对于 props.headline 却没有。

怎么样？

interface BlockCtaDoubleData
{
    headline: string;
}

interface BlockCtaDoubleImageData extends BlockCtaDoubleData
{
    image: string;
    alt: string;
}

interface BlockCtaDoubleTextData extends BlockCtaDoubleData
{
    text: string;
}

export type BlockCtaDoubleProps = BlockCtaDoubleTextData | BlockCtaDoubleImageData;

export function BlockCtaDouble(props: BlockCtaDoubleProps)
{
    return (
        <div>
            {props.headline}
            {props.image ? (
                <img src={props.image} alt={props.alt}/>
            ) : (
                {props.text}
            )}
        </div>
    );
}

仅供参考：错误表示计数器类型中不存在相应的道具。

Answer 1

要区分BlockCtaDoubleImageData 和BlockCtaDoubleTextData，您需要一个类型保护。

import React from "react";

interface BlockCtaDoubleData {
  headline: string;
}

interface BlockCtaDoubleImageData extends BlockCtaDoubleData {
  image: string;
  alt: string;
}

interface BlockCtaDoubleTextData extends BlockCtaDoubleData {
  text: string;
}

export type BlockCtaDoubleProps =
  | BlockCtaDoubleTextData
  | BlockCtaDoubleImageData;

const isBlockCtaDoubleImageData = (
  a: BlockCtaDoubleProps
): a is BlockCtaDoubleImageData => a.hasOwnProperty("image");

const isBlockCtaDoubleTextData = (
  a: BlockCtaDoubleProps
): a is BlockCtaDoubleTextData => a.hasOwnProperty("text");

export function BlockCtaDouble(props: BlockCtaDoubleProps) {
  return (
    <div>
      {props.headline}
      {isBlockCtaDoubleImageData(props) ? (
        <img src={props.image} alt={props.alt} />
      ) : (
        props.text
      )}
    </div>
  );
}

类型保护是一个返回x is Type 的函数。您需要以这种方式实现它：如果 x 是 Type 则返回 true，否则返回 false。具体情况由您决定。

编辑来自 cmets 的问题的答案

你无法用你的方法实现它。您将不得不使用有区别的联合。

interface BlockCtaDoubleData {
  headline: string;
  type: "image" | "text";
}

interface BlockCtaDoubleImageData extends BlockCtaDoubleData {
  image: string;
  alt: string;
  type: "image";
}

interface BlockCtaDoubleTextData extends BlockCtaDoubleData {
  text: string;
  type: "text";
}

export type BlockCtaDoubleProps =
  | BlockCtaDoubleTextData
  | BlockCtaDoubleImageData;

export function BlockCtaDouble(props: BlockCtaDoubleProps) {
  return (
    <div>
      {props.headline}
      {props.type === "image" ? (
        <img src={props.image} alt={props.alt} />
      ) : (
        props.text
      )}
    </div>
  );
}

<BlockCtaDouble headline="as" text="xd" type="image" image="xd" />

会抛出错误：

Type '{ headline: string; text: string; type: "image"; image: string; }' is not assignable to type '(IntrinsicAttributes & BlockCtaDoubleTextData) | (IntrinsicAttributes & BlockCtaDoubleImageData)'.
  Property 'text' does not exist on type 'IntrinsicAttributes & BlockCtaDoubleImageData'.

Answer 2

添加到现有答案，您可以使用更简洁的行为using in operator。您可以执行以下操作：

interface BlockCtaDoubleData
{
    headline: string;
}

interface BlockCtaDoubleImageData extends BlockCtaDoubleData
{
    image: string;
    alt: string;
}

interface BlockCtaDoubleTextData extends BlockCtaDoubleData
{
    text: string;
}

export type BlockCtaDoubleProps = BlockCtaDoubleTextData | BlockCtaDoubleImageData;

export function BlockCtaDouble(props: BlockCtaDoubleProps)
{
    return (
        <div>
            {props.headline}
            {("image" in props) ? (
                <img src={props.image} alt={props.alt}/>
            ) : (
                {props.text}
            )}
        </div>
    );
}

TS Playground to show the in behaviour