为什么将floatThead与Angular/TypeScript一起使用会导致错误属性“floatThead”在类型“JQuery上不存在

我需要使用第三方jQuery库

我正在使用从命令行安装的引导程序和jQuery与NPM。我也用NPM安装了floatThead

在我的组件中，我有以下导入：

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

我成功地选择了如下表元素：

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

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

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

有人能解释一下为什么会这样吗

尝试使用import*作为“floatThead”中的floatThead

---

如果可能的话，在stackblitz上向我们展示这段代码，因为没有floathead的类型，所以即使包含脚本，TS也不知道您可以调用$xxx.floathead

您可以将jquery和floathead添加到angular.json文件的脚本部分，然后：

在角度导入下方添加以下行

declare let $: any;

或者，如果您已经安装了jquery类型@types/jquery，那么可以扩展jquery接口

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

然后，在组件文件的顶部

declare let $: JQuery;

---

floatThead现在附带了typescript类型，所以更新到最新版本就可以了

如果你想知道的话，看起来像这样：

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

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

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

---

也许在导入中是floatthead而不是floatthead？@RazRonen:已经试过了。不起作用：也试过了。不适合我。希望能有所帮助：非常感谢！第一条import语句生成index.d.ts35，1：此模块使用“export=”声明，并且在使用“allowSyntheticDefaultImports”标志时，只能与默认导入一起使用。第二条导入语句找不到模块“floatthead”的声明文件。对于第一个错误，请尝试在tsconfig.json的编译器选项中添加：allowSyntheticDefaultImports:true；对于第二个错误，请尝试使用：const floatThead=require'floatThead'；如果它不起作用，那么我不知道如何帮助你：谢谢！然后从“jquery”以$形式导入*；与declare let$：JQuery冲突；只需在angular.json文件中添加JQuery和floatTheAdn，并从组件文件中删除导入即可，包括declare let$：any；，我没有错误。但我的应用程序仍然不受库的影响。如何测试它是否已正确集成？不删除declare let$：any；我不知道floathead，但是您应该在调用该方法时立即看到它是否有效？在调用该方法时设置断点。如果它正在通过floathead代码，那么错误就在其他地方