TypeScript使用jQuery DataTables遇2个错误，寻求解决办法

我实现了一个带可点击行展开和复选框过滤功能的jQuery DataTables示例，效果如下：

将代码转换为TypeScript时，VS Code触发两个类型错误：

• 类型'JQuery'上不存在属性'dataTableExt'（对应$.fn.dataTableExt.afnFiltering.push代码行）
• 调用renderAvgData时提示无匹配重载

以下是可正常运行的JavaScript代码：

JavaScript代码 #

'use strict;'

function renderOpenElo(data, typeStr, row, meta) {
  return typeStr === 'display' ? '<SPAN CLASS="xlarge">&#9654;</SPAN> ' + data : data;
}

function renderAvgData(data) {
  return '<TABLE WIDTH=100%>' +
    '<TR><TH>Average score: ' + data.avg_score + '</TH></TR>' +
    '<TR><TH>Average time: ' + data.avg_time + '</TH></TR></TABLE>';
}

jQuery(function() {
  var topTable = $('#topTable').DataTable({
    ajax: 'https://wordsbyfarber.com/ru/top-5',
    pageLength: 5,
    order: [
      [0, 'desc']
    ],
    columns: [{
        data: 'elo',
        searchable: false,
        className: 'details-control',
        render: renderOpenElo
      },
      {
        data: 'uid',
        className: 'dt-right'
      }
    ]
  });

  $('#topTable tbody').on('click', 'td.details-control', function() {
    var span = $(this).find('span').first();
    var tr = $(this).closest('tr');
    var row = topTable.row(tr);

    if (row.child.isShown()) {
      row.child.hide();
      span.html('&#9654;');
    } else {
      row.child(renderAvgData(row.data())).show();
      span.html('&#9660;');
    }
  });

  $('#below,#middle,#above').click(function() {
    topTable.draw();
  });

  $.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex, row) {
      if ('topTable' == oSettings.nTable.id) {
        console.log(row);

        if (row.uid < 10000) {
          return $('#below').is(':checked');
        }

        if (10000 < row.uid && row.uid < 20000) {
          return $('#middle').is(':checked');
        }

        return $('#above').is(':checked');
      }

      return true;
    }
  );
});

CSS代码 #

td.details-control {
  cursor: pointer;
}

span.xlarge {
  font-size: x-large;
}

HTML代码 #

<link type="text/css" rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<p align="center">Show user ids:
  <label><input type="checkbox" id="below" checked> Below 10k </label>
  <label><input type="checkbox" id="middle" checked> 10k - 20k </label>
  <label><input type="checkbox" id="above" checked> Above 20k </label>
</p>

<table id="topTable" class="stripe" width=100%>
  <thead>
    <tr>
      <th>Elo</th>
      <th>User id</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

错误1：dataTableExt属性不存在的解决方法 #

TypeScript默认的jQuery类型定义未包含DataTables的扩展属性，有两种解决方式：

方式1：安装官方类型定义包 #

执行以下命令安装DataTables的TypeScript类型定义：

npm install @types/jquery.dataTables --save-dev

安装后，TypeScript会自动识别$.fn.dataTableExt等DataTables扩展属性，无需额外配置。

方式2：手动扩展jQuery接口 #

如果不想安装额外包，可以在TypeScript文件中全局扩展jQuery接口：

declare global {
  interface JQueryStatic {
    fn: JQuery & {
      dataTableExt: {
        afnFiltering: Array<(
          oSettings: any,
          aData: any[],
          iDataIndex: number,
          row: any
        ) => boolean>;
      };
    };
  }
}

错误2：renderAvgData重载不匹配的解决方法 #

该错误源于TypeScript无法推断row.data()的返回类型，导致参数类型不匹配，解决步骤如下：

1. 定义行数据接口
   明确表格行的数据结构：

interface TableRow {
  elo: number;
  uid: number;
  avg_score: string;
  avg_time: string;
}

2. 指定renderAvgData的参数类型
   修改函数定义，明确参数类型：

function renderAvgData(data: TableRow) {
  return `<TABLE WIDTH=100%>
    <TR><TH>Average score: ${data.avg_score}</TH></TR>
    <TR><TH>Average time: ${data.avg_time}</TH></TR>
  </TABLE>`;
}

3. 初始化DataTables时指定泛型
   在创建DataTable实例时，指定泛型类型为TableRow，让row.data()返回正确的类型：

const topTable = $('#topTable').DataTable<TableRow>({
  ajax: 'https://wordsbyfarber.com/ru/top-5',
  pageLength: 5,
  order: [[0, 'desc']],
  columns: [
    {
      data: 'elo',
      searchable: false,
      className: 'details-control',
      render: renderOpenElo
    },
    {
      data: 'uid',
      className: 'dt-right'
    }
  ]
});

完成以上配置后，TypeScript就能正确推断类型，解决重载不匹配的问题。

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