使用Custom-Electron-Titlebar时TypeScript提示removeMenuBar不存在的问题求助

问题背景 #

在React+TypeScript开发的Electron项目中集成custom-electron-titlebar组件时，原代码使用removeMenuBar: true尝试移除菜单栏，但TypeScript抛出TS2353错误——TitleBarOption接口已不再包含该属性，且官方文档未同步更新。

解决方案 #

方法1：直接隐藏组件渲染的菜单DOM元素 #

组件初始化完成后，通过DOM选择器定位菜单容器并设置隐藏：

import { Titlebar, TitlebarColor } from "custom-electron-titlebar";

window.addEventListener("DOMContentLoaded", () => {
    const titlebar = new Titlebar({
        backgroundColor: TitlebarColor.fromHex("#000000"),
        titleHorizontalAlignment: "center",
        menuTransparency: 100,
    });

    // 定位并隐藏菜单容器
    const menuContainer = document.querySelector(".custom-electron-titlebar__menu");
    if (menuContainer) {
        menuContainer.style.display = "none";
    }
});

方法2：从Electron主进程隐藏原生应用菜单 #

如果不需要保留任何菜单功能，直接在Electron主进程中全局隐藏应用菜单：

// main.ts（Electron主进程文件）
import { app, Menu } from "electron";

app.whenReady().then(() => {
    // 彻底隐藏应用菜单
    Menu.setApplicationMenu(null);
});

方法3：临时扩展TypeScript接口（兼容写法） #

若想继续保留类似removeMenuBar的写法，可临时扩展TitleBarOption接口规避TS错误（仅为兼容写法，不保证组件实际生效）：

import { Titlebar, TitlebarColor, TitleBarOption } from "custom-electron-titlebar";

// 扩展接口添加removeMenuBar属性
declare module "custom-electron-titlebar" {
    interface TitleBarOption {
        removeMenuBar?: boolean;
    }
}

window.addEventListener("DOMContentLoaded", () => {
    new Titlebar({
        backgroundColor: TitlebarColor.fromHex("#000000"),
        titleHorizontalAlignment: "center",
        menuTransparency: 100,
        removeMenuBar: true,
    });
});

说明 #

优先推荐方法1或方法2：方法2从Electron层面彻底隐藏菜单，适合全局不需要菜单的场景；方法1仅针对组件渲染的菜单元素处理，灵活性更高。方法3仅作为临时兼容方案，因组件已移除该属性，后续版本可能完全失效。

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