Question

我正在尝试使用Bootbox用户bootbox.d.ts自定义对话框。它无法编译。

bootbox.dialog({
  message: "I am a custom dialog",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    danger: {
      label: "Danger!",
      className: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    main: {
      label: "Click ME!",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});

错误：

错误49提供的参数与任何调用签名都不匹配 target：无法将类型'string'应用于类型为的参数1 '{message：string;按钮：{cancel：{label：string;班级名称：串; }; confirmDelete：{label：string; className：string; 回调:(）=＆gt;无效; }; }; }”。

bootbox.d.ts：

interface BootboxStatic {
    alert(message: string, callback: () => void): void;
    alert(message: string, customButtonText?: string, callback?: () => void): void;
    confirm(message: string, callback: (result: boolean) => void): void;
    confirm(message: string, cancelButtonText?: string, confirmButtonText?: string, callback?: (result: boolean) => void): void;
    prompt(message: string, callback: (result: string) => void, defaultValue?: string): void;
    prompt(message: string, cancelButtonText?: string, confirmButtonText?: string, callback?: (result: string) => void, defaultValue?: string): void;
    dialog(message: string, handlers: BootboxHandler[], options?: any): void;
    dialog(message: string, handler: BootboxHandler): void;
    dialog(message: string): void;
    hideAll(): void;
    animate(shouldAnimate: boolean): void;
    backdrop(backdropValue: string): void;
    classes(customCssClasses: string): void;
    setIcons(icons: BootboxIcons): void;
    setLocale(localeName: string): void;
    addLocale(localeName: string, translations: BootboxLocale) : void;
}

如何修改定义以接受带有我正在使用的参数的对话框？

Answer 1

我把它分类了。不得不添加行

dialog(options: any): void; // Had to add this line

到bootbox.d.ts：

interface BootboxStatic {
    alert(message: string, callback: () => void): void;
    alert(message: string, customButtonText?: string, callback?: () => void): void;
    confirm(message: string, callback: (result: boolean) => void): void;
    confirm(message: string, cancelButtonText?: string, confirmButtonText?: string, callback?: (result: boolean) => void): void;
    prompt(message: string, callback: (result: string) => void, defaultValue?: string): void;
    prompt(message: string, cancelButtonText?: string, confirmButtonText?: string, callback?: (result: string) => void, defaultValue?: string): void;
    dialog(message: string, handlers: BootboxHandler[], options?: any): void;
    dialog(message: string, handler: BootboxHandler): void;
    dialog(message: string): void;
    dialog(options: any): void; // Had to add this line
    hideAll(): void;
    animate(shouldAnimate: boolean): void;
    backdrop(backdropValue: string): void;
    classes(customCssClasses: string): void;
    setIcons(icons: BootboxIcons): void;
    setLocale(localeName: string): void;
    addLocale(localeName: string, translations: BootboxLocale) : void; }

Answer 2

我会使用BootboxHandler数组

dialog(message: string, handlers: BootboxHandler[], options?: any): void;

interface BootboxHandler {
    label: string;
    class: string;
    callback: (result?: any) => void;
}

更改您的代码：

bootbox.dialog("I am a custom dialog",
  [{
      label: "Success!",
      class: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    {
      label: "Danger!",
      class: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    {
      label: "Click ME!",
      class: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }]
 );

TypeScript中的bootbox.dialog编译错误

2 个答案: