为什么在AngularTypeScript中使用floatThead会产生错误属性'floatThead'在'JQuery<any>'类型上不存在？

Question

我需要使用第三方jQuery库 https:/github.commkoryakfloatThead.

我使用的是Bootstrap和jQuery，从命令行用NPM安装。我也用NPM安装了floatThead。

在我的组件中，我有这些导入。

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

我成功地选择了表格元素，就像这样，通过调用 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.comeditangular-ivy-xlqrkh。

Answer 1

floatThead现在自带typecript类型，所以更新到最新版本，应该就可以了。"只是" 工作。

https:/github.comkoryakfloatTheadblobmasterdistjquery.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

尝试使用 import * as floatThead from 'floatthead';

如果可以的话，请在stackblitz上给我们看这段代码。

Answer 3

这是因为没有类型的 floathead所以即使包含了脚本，TS也不知道你可以调用 $(xxx).floathead()

你可以做的是添加 jquery 和 floathead 至 scripts 你的 angular.json 文件，然后。

或者在你的angular imports下面添加以下一行

declare let $: any;

或者，如果你已经安装了jquery类型 (@types/jquery)，你可以扩展JQuery接口

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

然后，在你的组件文件的顶部

declare let $: JQuery;