TS使用jQuery Autocomplete遇类型不兼容报错及代码求助

这个类型不兼容的问题我之前也碰到过，核心原因是jQuery Autocomplete的source回调里的this上下文，和TypeScript默认推断的类型不匹配——默认情况下TypeScript会把回调里的this推断成() => JQuery<HTMLElement>，但Autocomplete期望this指向的是当前绑定的DOM元素的jQuery对象，导致类型校验失败。

下面给你两个实用的解决方案：

方案一：用变量保存元素+箭头函数绕开上下文问题 #

先在.each()的回调里把当前元素的jQuery对象存起来，然后在source里用箭头函数（箭头函数会继承外层的上下文，不会改变this指向）直接使用这个变量，彻底避免this的类型混淆：

function load_autocomplete_fields(){ 
  $('.airport_field').each(function() {
    // 先保存当前元素的jQuery对象，明确类型
    const $currentField = $(this);
    $currentField.autocomplete({ 
      delay:10, 
      minLength: 0, 
      source: (request, response) => { 
        // 直接用预存的变量，不需要依赖this
        $currentField.attr('data-req-term', request.term); 
        $.ajax({ 
          url: $currentField.attr('data-source'), 
          dataType: "json", 
          data: { term: request.term }, 
          success(data) { 
            const results = []; 
            $.map(data.cities, function(value, key) { 
              results.push(value); 
              return $.map(value.airports, (val) => {
                // 补全你的机场选项处理逻辑，比如：
                results.push({ label: val.name, value: val.code });
              }); 
            });
            // 别忘了调用response把结果返回给Autocomplete
            response(results);
          } 
        }); 
      } 
    }); 
  });
}

方案二：手动指定回调中this的类型 #

如果你更习惯用普通函数，可以利用TypeScript的this参数特性，手动告诉TypeScript回调里的this是什么类型，让类型校验通过：

function load_autocomplete_fields(){ 
  $('.airport_field').each(function() {
    $(this).autocomplete({ 
      delay:10, 
      minLength: 0, 
      // 手动指定this的类型为JQuery<HTMLElement>
      source: function(this: JQuery<HTMLElement>, request, response) { 
        $(this).attr('data-req-term', request.term); 
        $.ajax({ 
          url: $(this).attr('data-source'), 
          dataType: "json", 
          data: { term: request.term }, 
          success(data) { 
            const results = []; 
            $.map(data.cities, function(value, key) { 
              results.push(value); 
              return $.map(value.airports, (val) => {
                results.push({ label: val.name, value: val.code });
              }); 
            });
            response(results);
          } 
        }); 
      } 
    }); 
  });
}

额外注意：确保安装了正确的类型定义 #

如果你的项目还没装jQuery和jQuery UI的TypeScript类型定义，记得先安装：

npm install @types/jquery @types/jqueryui --save-dev

这能让TypeScript正确识别jQuery和Autocomplete的所有API类型，减少后续的类型报错。

内容的提问来源于stack exchange，提问作者Balance