React+TypeScript泛型场景：如何让编译器自动推断条件属性类型？

问题场景 #

现有以下泛型Props定义，意图实现当inDashboard为true时name为必填属性，否则为可选：

type Props<InDashboard extends boolean> = { inDashboard: InDashboard } & (InDashboard extends true
    ? { name: string }
    : { name?: string });

但编写组件时出现编译器异常，无法自动识别inDashboard为true时name必有值：

const Dashboard = <InDashboard extends boolean>({ inDashboard, name }: Props<InDashboard>) => {
    const value: string = inDashboard ? name : 'default'; // 报错：name可能为undefined，无法赋值给string

    return <div>{value}</div>;
};

原因分析 #

TypeScript无法在函数内部根据泛型参数InDashboard的布尔约束，自动将name的类型与inDashboard的具体值做关联收窄——因为InDashboard是一个布尔类型的约束，而非具体的true/false字面量，编译器无法确定分支中name的具体类型。

解决方案 #

方案1：自定义类型守卫

通过自定义类型守卫，明确关联inDashboard与name的类型关系：

type Props<InDashboard extends boolean> = { inDashboard: InDashboard } & (InDashboard extends true
    ? { name: string }
    : { name?: string });

// 自定义类型守卫，判断当前props是否为Dashboard模式
function isInDashboard(props: Props<boolean>): props is Props<true> {
    return props.inDashboard;
}

const Dashboard = <InDashboard extends boolean>({ inDashboard, name }: Props<InDashboard>) => {
    const value: string = isInDashboard({ inDashboard, name }) ? name : 'default';
    return <div>{value}</div>;
};

方案2：函数重载

直接为组件定义两种参数签名，明确区分两种场景的类型要求：

// 重载签名：分别定义两种场景的参数类型
function Dashboard(props: { inDashboard: true; name: string }): JSX.Element;
function Dashboard(props: { inDashboard: false; name?: string }): JSX.Element;

// 实现签名：兼容两种场景的通用类型
function Dashboard({ inDashboard, name }: { inDashboard: boolean; name?: string }) {
    // 重载已保证inDashboard为true时name必存在，此处name!是安全的
    const value: string = inDashboard ? name! : 'default';
    return <div>{value}</div>;
}

方案3：重构Props类型并使用分支判断

调整Props的定义方式，让TypeScript能在条件分支中自动识别类型：

// 重构Props为分布式条件类型，明确两种场景的结构
type Props<InDashboard extends boolean> = InDashboard extends true
    ? { inDashboard: true; name: string }
    : { inDashboard: false; name?: string };

const Dashboard = <InDashboard extends boolean>(props: Props<InDashboard>) => {
    if (props.inDashboard) {
        // 此处TypeScript自动识别props为Props<true>，name为必填string
        return <div>{props.name}</div>;
    } else {
        return <div>{props.name ?? 'default'}</div>;
    }
};

内容的提问来源于stack exchange，提问作者Amaros