基于不同属性的多种 TypeScript 区分

Question

我正在尝试构建一个支持不同用例的复杂 REACT 组件。为了简化其使用，我想实现 TypeScript discriminations types 以更好地推断 props。

post完整的例子没有用，但我可以给你看一个更简单的例子，就是下面的例子：

interface ICategoryDiscriminationGame {
    category: 'game';
    gameType: 'AAA' | 'AA' | 'A';
}

interface ICategoryDiscriminationProgram {
    category: 'program';
    programType: 'software' | 'freeware';
}

type TCategoryDiscrimination = (ICategoryDiscriminationGame | ICategoryDiscriminationProgram);


interface ISaleDiscriminationPresale {
    saleType: 'pre-sale',
    preSaleCost: number;
}

interface ISaleDiscriminationRetailSale {
    saleType: 'retail',
    retailSaleCost: number;
}

type TSaleDiscrimination = (ISaleDiscriminationPresale | ISaleDiscriminationRetailSale);


type TExampleCompProps = TCategoryDiscrimination & TSaleDiscrimination;

export const ExampleComp = (props: TExampleCompProps) => {
    if (props.category === 'game') { // In here, intellisense infer only use 'props.category' and 'props.saleType' -> NICE
        console.log(props.gameType); // In here, intellisense infer also 'props.gameType' -> NICE
    }

    if (props.saleType === 'pre-sale') { // In here, intellisense infer only use 'props.category' and 'props.saleType' -> NICE
        console.log(props.preSaleCost); // In here, intellisense infer also 'props.preSaleCost' -> NICE
    }

    if (props.category === 'game' && props.saleType === 'retail') { // In here, intellisense infer only use 'props.category' and 'props.saleType' -> NICE
        console.log(props.retailSaleCost); // In here, intellisense infer also 'props.retailSaleCost' and 'props.gameType' -> NICE
        console.log(props.gameType); // In here, intellisense infer also 'props.retailSaleCost' and 'props.gameType' -> NICE
    }

    return <p>In example comp</p>
}

如您所见，在 ExampleComp 中，智能感知非常出色，而且效果很好。问题是当我尝试使用 ExampleComp.
我期望的是，当我写 <ExampleComp 时，智能感知只允许我使用道具 category 和 saleType，因为如果不先定义这两个道具，其他道具就不可能存在。但是，相反，它只是建议一切：

所以，这里的问题是：我缺少什么不能使智能感知在道具中也能正常工作？

TS Playground link

Answer 1

这就是 IntelliSense 的本质。一旦您开始提供所需道具的一些组合，建议的道具将缩小到仅适用于当前可能组合的道具：

在添加一些道具之前：

添加一些道具后：

基于不同属性的多种 TypeScript 区分

Multiple TypeScript discriminations based on different properties

intellisense

typescript

reactjs

react-hooks