在TypeScript中创建电子菜单？

刚刚用TypeScript启动了一个简单的Electron应用程序，我正在尝试自定义菜单设置。我遵循JS中的示例，但是

menu=menu.buildFromTemplate（模板）编译失败，出现错误：

main.ts（109,35）：错误TS2345:类型为“（{label:string；submenu:（{role:string；}{type:string；}）]；}{role:string；submenu…”的参数不能分配给类型为“MenuItemConstructorOptions[]”的参数。

我一定是遗漏了什么。在任何地方都找不到类型“MenuItemConstructorOptions”（但我可能找错了位置）。我的main.ts的完整代码是：

import { app, BrowserWindow, screen, Menu } from 'electron';
import * as path from 'path';

let win, menu;

function createWindow() {
    const electronScreen = screen;
    const size = electronScreen.getPrimaryDisplay().workAreaSize;

    win = new BrowserWindow({
        x: 0,
        y: 0,
        width: size.width,
        height: size.height
    });

    // and load the index.html of the app.
    win.loadURL('file://' + __dirname + '/index.html');
    win.webContents.openDevTools();
    win.on('closed', () => {
        win = null;
    });
}

function createMenu() {
    const template = [{
            label: 'Edit',
            submenu: [
                { role: 'undo' },
                { role: 'redo' },
                { type: 'separator' },
                { role: 'cut' },
                { role: 'copy' },
                { role: 'paste' },
                { role: 'pasteandmatchstyle' },
                { role: 'delete' },
                { role: 'selectall' }
            ]
        },
        {
            label: 'View',
            submenu: [
                { role: 'reload' },
                { role: 'forcereload' },
                { role: 'toggledevtools' },
                { type: 'separator' },
                { role: 'resetzoom' },
                { role: 'zoomin' },
                { role: 'zoomout' },
                { type: 'separator' },
                { role: 'togglefullscreen' }
            ]
        },
        { role: 'window', submenu: [{ role: 'minimize' }, { role: 'close' }] },
        {
            role: 'help',
            submenu: [{
                label: 'Learn More',
                click() {                           require('electron').shell.openExternal('https://electron.atom.io');
                }
            }]
        }
    ];
    menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
}

try {
    app.on('ready', function() {
        createWindow();
        createMenu();
    });
    app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
            app.quit();
        }
    });

    app.on('activate', () => {
        if (win === null) {
            createWindow();
        }
    });
} catch (e) {
    throw e;
}

我猜你有一个错误/输入错误：

{ type: 'separator' },

TypeScript无法解析类型，因为未知的
类型
属性（根据您的其他输入，应该是
角色
）
我无法在TS中获得在JS中工作的示例。
MenuItemConstructorOptions
是在electron包的
electron.d.TS
文件中定义的一个接口。但是我找到了一个解决方法，分别定义菜单项并将其推到一个空数组中。有趣的是，其中的子菜单项被接受为nd工作正常。这是工作正常的代码：

  function createMenu() {
     const template = [];
     // Edit Menu
     template.push({
        label: 'Edit',
        submenu: [
           { role: 'undo' },
           { role: 'redo' },
           { type: 'separator' },
           { role: 'cut' },
           { role: 'copy' },
           { role: 'paste' },
           { role: 'pasteandmatchstyle' },
           { role: 'delete' },
           { role: 'selectall' }
        ]
     });
     // View Menu
     template.push({
        label: 'View',
        submenu: [
           { role: 'reload' },
           { role: 'forcereload' },
           { role: 'toggledevtools' },
           { type: 'separator' },
           { role: 'resetzoom' },
           { role: 'zoomin' },
           { role: 'zoomout' },
           { type: 'separator' },
           { role: 'togglefullscreen' }
        ]
     });
     // Windown menu
     template.push({
        role: 'window',
        submenu: [{ role: 'minimize' }, { role: 'close' }]
     });
     // Help menu
     template.push({
        role: 'help',
        submenu: [
           {
              label: 'Learn More',
              click() {
                 require('electron').shell.openExternal('https://electron.atom.io');
              }
           }
        ]
     });

     if (process.platform === 'darwin') {
        template.unshift({
           label: app.getName(),
           submenu: [
              { role: 'about' },
              { type: 'separator' },
              { role: 'services', submenu: [] },
              { type: 'separator' },
              { role: 'hide' },
              { role: 'hideothers' },
              { role: 'unhide' },
              { type: 'separator' },
              { role: 'quit' }
           ]
        });

        // Edit menu
        template[1].submenu.push(
           { type: 'separator' },
           { label: 'Speech', submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }] }
        );

        // Window menu
        template[3].submenu = [{ role: 'close' }, { role: 'minimize' }, { role: 'zoom' }, { type: 'separator' }, { role: 'front' }];
     }

     menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);
  }

如果有人在同一个问题上出错，希望这能有所帮助。
对于我来说，将模板const的类型设置为
Electron.MenuItemConstructorOptions[]

例如：

const template: Electron.MenuItemConstructorOptions[] = [{
        label: 'Edit',
        submenu: [
            { role: 'undo' },
            { role: 'redo' },
            { type: 'separator' },
            { role: 'cut' },
            { role: 'copy' },
            { role: 'paste' },
            { role: 'pasteandmatchstyle' },
            { role: 'delete' },
            { role: 'selectall' }
        ]
    },
    {
        label: 'View',
        submenu: [
            { role: 'reload' },
            { role: 'forcereload' },
            { role: 'toggledevtools' },
            { type: 'separator' },
            { role: 'resetzoom' },
            { role: 'zoomin' },
            { role: 'zoomout' },
            { type: 'separator' },
            { role: 'togglefullscreen' }
        ]
    },
    { role: 'window', submenu: [{ role: 'minimize' }, { role: 'close' }] },
    {
        role: 'help',
        submenu: [{
            label: 'Learn More',
            click() {
                require('electron').shell.openExternal('https://electron.atom.io');
            }
        }]
    }
];

在MenuItemConstructorOptions界面中，子菜单属性是使用联合类型定义的。因此，需要将该属性转换为MenuItemConstructorOptions数组，以便识别推送运算符：

(windowMenu.submenu as MenuItemConstructorOptions[]).push(
  {
    type: 'separator',
  },
  {
    label: 'Bring All To Front',
    role: 'front'
  }
);

对我来说，问题在于适当的角色资本化：

  { role: 'forceReload' },
  { role: 'toggleDevTools' }

结束

参见。
官方文档：注明“类型”"是一个可选属性，其允许值为正常值、分隔符、子菜单、复选框或radio@stwissel这可能是真的。但是typescript不理解某些内容。应该在此处检查类型定义，而不是文档。typescript无法将数组数据类型与定义相匹配。Co你能发布
MenuItemConstructorOptions
的定义吗？有趣的是：我在任何地方都找不到
MenuItemConstructorOptions
的定义。似乎在打字中丢失了。我猜我必须创建它。我很确定它存在。很可能它是在每次构建过程中从零开始创建的（如果您查看package.json脚本，看起来是这样的）。无论如何，TypeScript知道它，否则它不会给出错误，
不可分配给“MenuItemConstructorOptions[]”类型的参数。
  { role: 'forcereload' },
  { role: 'toggledevtools' }