Property 'dataTableExt' does not exist on type 'JQuery<HTMLElement>' - when trying to use jQuery DataTables with TypeScript

I have prepared a simple jsFiddle demo, which shows a jQuery DataTable with clickable rows and checkbox filtering:

When I try to convert my code to TypeScript (here a not really working StackBlitz demo), then I have 2 errors displayed in VS Code:

> Property 'dataTableExt' does not exist on type 'JQuery<HTMLElement>' (for the $.fn.dataTableExt.afnFiltering.push line)

> No overload matches this call (for the renderAvgData call)

I have searched around, on GitHub and at the DataTable forum, but hasn't been able to find a resolution for that.

Below is the copy of my working Javascript code (same as in the jsFiddle):

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

'use strict;'
function renderOpenElo(data, typeStr, row, meta) {
return typeStr === 'display' ? '<SPAN CLASS="xlarge">▹</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('▹');
} else {
row.child(renderAvgData(row.data())).show();
span.html('▿');
}
});
$('#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;
}
);
});

<!-- language: lang-css -->

td.details-control {
cursor: pointer;
}
span.xlarge {
font-size: x-large;
}

<!-- language: lang-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>

<!-- end snippet -->

The plugin author has been very nice to answer both my questions in the DataTables forum:

1. The $.fn.dataTable.ext.search should be used for filtering
2. The .show() error message has been resolved in DataTables version 1.13.5