typescript - 卡在 grafana 中构建面板插件教程

Question

我已经关注构建面板插件教程（https://grafana.com/tutorials/build-a-panel-plugin/），但我坚持在src/module.ts 上添加 .addRadio

问题是当我添加 .addRadio IDE 时显示警告消息

Property 'addRadio' does not exist on type 'PanelPlugin<SimpleOptions, any>'.ts(2339)

当我强制构建插件时，它会显示

yarn run v1.22.5
$ grafana-toolkit plugin:dev
⠙ Linting


  /var/lib/grafana/plugins/panel-plugin/src/module.ts
    43:4  error  Parsing error: Declaration or statement expected

  ✖ 1 problem (1 error, 0 warnings)



  Trace: Error: 1 linting errors found in 4 files
      at /var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/src/cli/tasks/plugin.build.js:98:31
      at step (/var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/node_modules/tslib/tslib.js:140:27)
      at Object.next (/var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/node_modules/tslib/tslib.js:121:57)
      at fulfilled (/var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/node_modules/tslib/tslib.js:111:62)
      at processTicksAndRejections (internal/process/task_queues.js:95:5)
      at /var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/src/cli/utils/useSpinner.js:25:29
      at step (/var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/node_modules/tslib/tslib.js:140:27)
      at Object.throw (/var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/node_modules/tslib/tslib.js:121:57)
      at rejected (/var/lib/grafana/plugins/panel-plugin/node_modules/@grafana/toolkit/node_modules/tslib/tslib.js:112:69)
      at processTicksAndRejections (internal/process/task_queues.js:95:5)
✖ 1 linting errors found in 4 files
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

谁能解释我做错了什么，或者我实际上可以同时拥有 .addRadio 一次？

**当我删除第一个 .addRadio 时一切正常

这是我的src/module.ts

import { PanelPlugin } from '@grafana/data';
import { SimpleOptions } from './types';
import { SimplePanel } from './SimplePanel';

export const plugin = new PanelPlugin<SimpleOptions>(SimplePanel).setPanelOptions(builder => {
  return builder 
  
    .addTextInput({
      path: 'text',
      name: 'Simple text option',
      description: 'Description of panel option',
      defaultValue: 'Default value of text input option',
    })
    
    .addBooleanSwitch({
      path: 'showSeriesCount',
      name: 'Show series counter',
      defaultValue: false,
    })
    .addRadio({
      path: 'seriesCountSize',
      defaultValue: 'sm',
      name: 'Series counter size',
      settings: {
        options: [
          {
            value: 'sm',
            label: 'Small',
          },
          {
            value: 'md',
            label: 'Medium',
          },
          {
            value: 'lg',
            label: 'Large',
          },
        ],
      },
      showIf: config => config.showSeriesCount
    }); // <=== fixed it by remove this ;

    .addRadio({ // show error when added this
      path: 'color',
      name: 'Circle color',
      defaultValue: 'red',
      settings: {
        options: [
          {
            value: 'red',
            label: 'Red',
          },
          {
            value: 'green',
            label: 'Green',
          },
          {
            value: 'blue',
            label: 'Blue',
          },
        ],
      }
    });
});

标签： typescriptgrafana