Javascript 检查一个条件React prop不满足TS

我理解打字稿有困难。我想定义一个

，其中包含一个必需的属性

requiredProp

，以及一个条件属性

extend

，如果为true，则允许使用

extendedProp

e、 g

---

如果您使用整个道具对象执行此操作，它将起作用。检查

props.extend

将缩小

props

上的类型，因此允许使用

props.extendedProp

：

const Component: React.FC<ComponentProps> = (props) => {
    if (props.extend) {
        props.extendedProp(); 
    }
}

弄清楚这些事情的含义是不切实际的（或者可能是不可能的）

---

这是一个常见问题。您需要在分解结构之前进行检查。一旦你破坏了结构，你就失去了属性之间的关系。谢谢。我以前可能读过关于解构的文章，但直到现在我遇到麻烦，我才想起它。

// types

interface RequiredProps {
  requiredProp: 'string';
}

type ExtendedProps =
  | {
      extend?: false;
      extendedProp?: never;
    }
  | {
      extend: true;
      extendedProp: Function;
    };

type ComponentProps = RequiredProps & ExtendedProps;


// component

const Component: React.FC<ComponentProps> = ({requiredProp, extend, extendedProp}) => {
    if (extend) {
        extendedProp(); // ERROR: Cannot invoke an object which is possibly 'undefined'.
    }
}

    if (extendedProp) {
        extendedProp(); // no error
    }

const Component: React.FC<ComponentProps> = (props) => {
    if (props.extend) {
        props.extendedProp(); 
    }
}

const Component: React.FC<ComponentProps> = ({requiredProp, extend, extendedProp}) => {
  extend = Math.random() > 0.5
  if (extend) {
    extendedProp(); 
  }
}