如果布尔类型为 true，Typescript 会扩展类型

Question

我想知道是否可以根据另一种类型的值来扩展类型？

\n

interface NavType {\n    hideNav?: boolean\n    dev?: boolean\n}\n

\n

hideNav我想仅当arg 为 false 时才允许使用dev。

\n

const Navbar: React.FC<NavType> = ({ children, hideNav, dev = false }) => (\n    <nav>\n        {!dev ? (\n            <NavDefault hideNav={!!hideNav}>{children}</NavDefault>\n        ) : (\n            <NavDev>{children}</NavDev>\n        )}\n    </nav>\n)\n

\n

在这种情况下我该如何使用条件语句？

\n

// Should PASS\nconst navArgs1: NavType = {\n    hideNav: undefined,\n    dev: true\n}\n\nconst navArgs2: NavType = {\n    hideNav: true or\xc2\xa0false,\n    dev: false\n}\n\n// Should NOT PASS\nconst navArgs3: NavType = {\n    hideNav: true or\xc2\xa0false,\n    dev: true\n}\n

\n

Answer 1

您可以定义两种类型并让组件属性成为它们的并集；原则上如下（如TS Playground代码所示）：

interface NavBase {
    dev: boolean;
}

interface DevNavType extends NavBase {
    dev: true;
    hideNav?: undefined;
}

interface NotDevNavType extends NavBase {
    dev: false;
    hideNav: boolean;
}

// This simulates your component
function f(x: DevNavType | NotDevNavType) {

}

f({ dev: true });                      // Works
f({ dev: true, hideNav: undefined });  // Also works
f({ dev: false, hideNav: true });      // Works too - for any boolean value of hideNav
f({ dev: false });                     // Compiler error
f({ dev: true, hideNav: true });       // Compiler error

笔记：

1. 你真的不需要基本接口，NavBase
2. 您可能需要为联合定义一个类型，以保持代码清晰：type NavType = DevNavType | NotDevNavType