web-dev-qa-db-ja.com

TypeScriptでElectronメニューを作成しますか？

TypeScriptを使用して簡単なElectronアプリを起動したばかりで、カスタムメニューを設定しようとしています。私はJSの例に従いましたが、

menu = Menu.buildFromTemplate(template);は次のエラーでコンパイルに失敗します：

main.ts(109,35): error TS2345: Argument of type '({ label: string; submenu: ({ role: string; } | { type: string; })[]; } | { role: string; submenu...' is not assignable to parameter of type '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;
    }
typescriptelectrontypescript-typingstsc
13
stwissel

私にとっては、テンプレート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');
            }
        }]
    }
];
16
PhoneixS

TSのJSで動作するサンプルを取得できませんでした。 MenuItemConstructorOptionsは、electronパッケージのelectron.d.tsファイルで定義されているインターフェースです。ただし、メニューエントリを個別に定義し、それらを空の配列にプッシュすることで回避策を見つけました。興味深いことに、内部のサブメニューエントリは受け入れられ、問題なく機能しました。これは機能したコードです：

  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);
  }

誰かが同じ問題につまずいた場合、これが役立つことを願っています

2
stwissel

MenuItemConstructorOptionsインターフェースでは、サブメニュープロパティは共用体型で定義されます。したがって、プッシュ演算子が認識されるためには、プロパティをMenuItemConstructorOptions配列にキャストする必要があります。

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

私にとっての問題は、適切な役割の大文字化でした。

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

以上

  { role: 'forcereload' },
  { role: 'toggledevtools' }

docs を参照してください。

1
moonwave99

あなたは間違い/タイプミスがあります私はここで推測します：

{ type: 'separator' },

typeプロパティが不明なため、TypeScriptはタイプを解決できません（他の入力によるとroleである必要があります）

1
smnbbrv