如何绑定到表单的 ajax：使用 JQuery/Rails UJS 在 typescript 中取得成功

Posted 2023-05-09

【中文标题】如何绑定到表单的 ajax：使用 JQuery/Rails UJS 在 typescript 中取得成功

【英文标题】：How to bind to a form's ajax:success in typescript with JQuery/Rails UJS

【发布时间】：2021-06-30 15:00:42

【问题描述】：

我正在使用 Rails 6、webpacker 和 ts-loader。我安装了@types/jquery。我有这个代码。

interface PDFSave 
  url: string;


interface AjaxSuccessEvent 
  detail: [PDFSave, any, any];


$(() => 
  const setup = ($container: JQuery<htmlElement>) => 
    $container
    .on('ajax:success', (e: AjaxSuccessEvent) => 
      const [data] = e.detail;
      // here I want to use the PDFSave data...
    )
  ;

  const $container = $('form.pdf-save-form');
  setup($container);
);

打字稿是这样说的：

[tsl] /Users/(me)/work/(rails app 文件夹)/app/javascript/(相关文件).ts(12,9) 中的错误 TS2769：没有重载匹配此调用。 最后一个重载给出了以下错误。 'string' 类型的参数不能分配给 'TypeEventHandlers void, HTMLElement, HTMLElement>' 类型的参数。

我知道 Rails UJS 在事件的 detail 属性中返回 ajax 调用的解析 json 作为 3 元组的第一个元素。我正在从服务器端的 ajax 调用返回 url: "http://some/place" 的 json。

我的问题是如何优雅地让这个概念与 Typescript 一起传递，而不会出现编译器错误。

【参考方案1】：

我能够更改事件类型以适应 jquery on(...) 重载之一，然后向下转换以符合我的特殊事件类型。也必须扩展 JQueryEventObject。

interface PDFSave 
  url: string;


interface AjaxSuccessEvent extends JQueryEventObject 
  detail: [PDFSave, any, any];


$(() => 
  const setup = ($container: JQuery<HTMLElement>) => 
    $container
    .on('ajax:success', (e: JQueryEventObject) => 
      const [data] = (e as AjaxSuccessEvent).detail;
      // can use PDFSave data...
    )
  ;

  const $container = $('form.pdf-save-form');
  setup($container);
);