如何基于flag props为React组件实现TypeScript条件类型约束？

你的核心需求是让TypeScript通过flag的字面量类型自动推断组件所需的props，之前的泛型写法需要显式传入泛型参数，不符合React组件的调用习惯。正确的做法是利用判别式联合类型（Discriminated Union），让TypeScript自动根据flag的值约束props结构。

修正后的类型与组件实现 #

// 保留原有的场景接口定义
interface NewPostProps {
    flag: "newPost";
}

interface UpdatePostProps {
    flag: "updatePost";
    title: string;
    content: string;
}

// 用联合类型直接定义组件的Props类型
type PostEditorProps = NewPostProps | UpdatePostProps;

export const PostEditor = ({ flag, title, content }: PostEditorProps) => {
    // 组件内部可通过flag做类型守卫，自动推断对应场景的props类型
    if (flag === "updatePost") {
        // 此处TypeScript会自动确认title和content为string类型，无需额外断言
        console.log("更新文章：", title, content);
    }

    return <></>;
};

调用示例（TypeScript会自动校验） #

// 新文章场景：无需传入title和content，无类型错误
<PostEditor flag="newPost" />;

// 更新文章场景：必须传入title和content，符合约束
<PostEditor flag="updatePost" title="React编辑器实践" content="基于TypeScript的类型约束" />;

// 错误示例：updatePost场景缺少content，TypeScript会直接提示错误
<PostEditor flag="updatePost" title="React编辑器实践" />;

原写法失效原因说明 #

你之前定义的IPostEditorProps<T>是条件类型，需要显式指定泛型参数T才能生效，但React组件调用时通常不会手动传入泛型（比如<PostEditor<"newPost"> />），而是依赖props的自动推断。使用判别式联合类型后，TypeScript会通过flag这个共同的字面量字段自动区分不同的props结构，实现更自然的类型约束逻辑。

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