为什么使用带有 Angular/TypeScript 的 floatThead 会产生错误 Property 'floatThead' does not exist on type 'JQuery<any> '</any>

Question

I need to use the 3rd party jQuery library https://github.com/mkoryak/floatThead .

I'm using Bootstrap and jQuery installed from the command line with NPM. I've installed floatThead with NPM as well.

In my component, I have these imports:

import * as $ from 'jquery';
import 'floatThead';

I successfully select the table element like this:

<table class="table table-responsive table-bordered table-hover" #tableElement>

@ViewChild('tableElement')
private tableElement: ElementRef;

And by calling floatThead() like this, I get the above error and see no effect on my site

public ngAfterViewInit(): void {
   $(this.tableElement.nativeElement).floatThead({top: 50});
}

Can anyone explain to me why that is?

https://stackblitz.com/edit/angular-ivy-xlqrkh

Answer 1

Try to use import * as floatThead from 'floatthead';

And, if it's possible, show us this code on stackblitz

Answer 2

It is because there are no types for floathead , so even if the script is included, TS does not know that you can call $(xxx).floathead()

What you can do is add jquery and floathead to the scripts section of your angular.json file and then:

Either add the following line below your angular imports

declare let $: any;

Or, if you've already installed jquery types ( @types/jquery ), you can extend the JQuery interface

interface JQuery
{
      floathead(options: any): JQuery;
}

And then, on top of your component file

declare let $: JQuery;

Answer 3

floatThead now comes with typescript types, so update to latest version and it should "just" work.

https://github.com/mkoryak/floatThead/blob/master/dist/jquery.floatThead.d.ts

which in case you were wondering, look like this:

interface floatTheadOptions {
    position?: string;
    scrollContainer?: ($table: JQuery) => JQuery;
    responsiveContainer?: ($table: JQuery) => JQuery;
    ariaLabel: ($table: JQuery, $headerCell: JQuery, columnIndex: number) => string;
    headerCellSelector?: string;
    floatTableClass?: string;
    floatContainerClass?: string;
    top?: number;
    bottom?: number;
    zIndex?: number;
    debug?: boolean;
    getSizingRow?: ($table: JQuery, $cols: JQuery, $fthCells: JQuery) => JQuery;
    copyTableClass?: boolean;
    autoReflow?: boolean;
}

interface JQuery {
    floatThead(floatTheadOptions?: floatTheadOptions): JQuery;
    floatThead(action: string): JQuery;
    trigger(action: string): JQuery;
    on(events: string, handler: (event: Event, $floatContainer: JQuery) => void|boolean): JQuery;
    on(events: string, handler: (event: Event, isFloated: boolean, $floatContainer: JQuery) => void|boolean): JQuery;
}