Question

我正在构建一个React组件，该组件根据用户传递的属性具有不同的HTML标签。这是一个示例：

interface Common {
    common?: number;
}

interface A extends Common {
    first?: string;
    second?: string;
    check: true;
}

interface B extends Common {
    third?: string;
    fourth?: string;
    check?: false;
}

type Test = A | B;

要对此进行测试，我期望以下内容：

// Success
let test: Test = {
    common: 1,
    check: true,
    first: "text"
}
// Success
let test: Test = {
    common: 1,
    check: false,
    third: "text"
}
// Fail
let test: Test = {
    common: 1,
    check: true,
    third: "text"
}
// Fail
let test: Test = {
    common: 1,
    check: false,
    first: "text"
}

所有这些都有效，挑战在于获取B型而根本不传递任何值来进行检查，例如：

let test: Test = {
    common: 1,
    first: "text", // should highlight an error because `check` is not passed
    third: "text",
}

这是我尝试过的：

// Attempt 1: is to include possible values
interface B extends Common {
    third?: string;
    fourth?: string;
    check?: false | null | undefined | never | unknown | void; // tried them all
}

// Attempt 2: is not to include at all. Still didn't work
interface B extends Common {
    third?: string;
    fourth?: string;
}

Answer 1

这是因为A | B是包含性OR，但是您需要exclusive OR。您可以使用npm package ts-xor。

Answer 2

因为检查在两个接口之间是通用的。为什么不

echo-ing

相反？

如何使用Typescript

2 个答案: