Почему использование floatThead с Angular / TypeScript дает ошибку. Свойство floatThead не существует для типа JQuery<any>

Question

Мне нужно использовать стороннюю jQuery библиотеку https://github.com/mkoryak/floatThead.

Я использую Bootstrap и jQuery, установленные из командной строки с NPM . Я также установил floatThead с NPM.

В моем компоненте у меня есть следующие импорты:

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

Я успешно выбираю элемент таблицы следующим образом:

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

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

И, вызывая floatThead () таким образом, я получаю указанную выше ошибку и не вижу никакого эффекта на моем сайте

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

Кто-нибудь может объяснить мне, почему это так?

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

Answer 1

floatThead теперь поставляется с типами машинописного текста, поэтому обновите его до последней версии, и он должен "просто" работать.

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

который, если вам интересно, выглядит так:

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;
}

Answer 2

Это потому, что для floathead нет типов, поэтому даже если скрипт включен, TS не знает, что вы можете вызвать $(xxx).floathead()

Что вы можете сделать, это добавить jquery и floathead в раздел scripts вашего angular.json файла, а затем:

Либо добавьте следующую строку под angular import

declare let $: any;

Или, если у вас уже установленных jquery типов (@types/jquery), вы можете расширить JQuery интерфейс

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

А затем поверх вашего файла компонента

declare let $: JQuery;

Answer 3

Попробуйте использовать import * as floatThead from 'floatthead';

И, если возможно, покажите нам этот код на stackblitz