typescript :如果设置了另一个可选类型，则需要设置类型

Question

如果设置了第一种类型(它本身是可选的)，我想要求第二种类型。有时我在代码中遇到问题，设置了一个可选属性后，还需要提供其他属性才能使 React 组件正常工作。

例子

interface ComponentProps {
    title: string;
    isEnlarged?: boolean;
    text?: string; // <-- If isEnlarged is set, text shouldn't be optional
    imageUri?: string // <--- If isEnlarged is set, imageUri shouldn't be optional
}

原因是通过类型检查强制执行一致的组件行为。所有放大的组件都应该有文本和图像。

有没有办法通过 TypeScript 辅助函数或逻辑来实现？

Answer 1

您可以使用可区分的联合:

type ComponentProps = {
  title: string;
} & ({
    isEnlarged: true; // asuming this must be true for otehrs to be required
    text: string;
    imageUri: string
} | {
    isEnlarged?: false; // asuming this must be true for otehrs to be required
    text?: string;
    imageUri?: string
})

let a: ComponentProps = { title: "test" } //ok
let b: ComponentProps = { title: "test", isEnlarged: true } //err
let c: ComponentProps = { title: "test", isEnlarged: true, imageUri: "", text: "" } //ok

Playground Link