如何在TypeScript中使用OverlayScrollbars？

Question

我正在使用TypeScript项目和ASP.NET Core 3.0 IDE学习VS 2019。我已使用OverlayScrollbars下载了npm插件：https://kingsora.github.io/OverlayScrollbars/#!overview。

npm install overlayscrollbars
npm install @types/overlayscrollbars

这是一个非常简单的用法示例：

/// <reference path="../../libs/npm/@types/overlayscrollbars/index.d.ts" />

import OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayscrollbars/js/overlayscrollbars.js

$(() => {
    OverlayScrollbars($("body")[0], { });
    //$("body").overlayScrollbars({ });
});

解决方案编译，文件被编译（目标已更改为注释中的目标，尽管我将询问有关一天进行编译的问题）并复制到wwwroot。此时已正确引用了文件。

这是我的tsconfig.json文件：

{
  "compileOnSave": true,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "noEmitOnError": true,
    "noImplicitAny": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [ "node_modules/@types/**" ]
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

[使用此：OverlayScrollbars($("body")[0], { });，我在运行时得到Uncaught SyntaxError: The requested module does not provide an export named 'default'。

[使用第二个（$("body").overlayScrollbars({ });），我得到编译错误TS2345: (TS) Argument of type '{}' is not assignable to parameter of type string和一些奇怪的智能感知问题：

在C#中解决此问题是微不足道的，但我对TS的了解不足。尝试通过反复试验解决问题不是很有效。

这里是一个极简项目，再现了此问题：

https://mega.nz/#!9vYGCS6Q!p_jfFXYSo_1yH63UsSWqwsypC_2Lclg57LhirZfdiGI

将不胜感激。

//编辑1

@ Kewin Dousse

抱歉，我没有明确说明，我明确引用了声明，因为我将实际文件导入到.cshtml文件中。

<link href="~/libs/npm/overlayscrollbars/css/OverlayScrollbars.css" rel="stylesheet" />
...
<script src="~/libs/npm/overlayscrollbars/js/jquery.overlayScrollbars.js"></script>

我专门是为了避免在这里写到这些问题，因此我尝试使用JQuery或OVerlayScrollbars的香草版本都没有关系。

事情是，据我所知，如果要使用导入功能，浏览器需要指向扩展名为JavaScript的.js文件，如果我想使其生效。

为了解决这个问题，我正在gulp替换注释中的d.ts文件的实际路径。

如果我这样做：

import OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayScrollbars/js/jquery.overlayScrollbars.js

我在.ts文件中收到编辑器警告：

以及运行时错误：

如果我这样做：

import { OverlayScrollbars } from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayScrollbars/js/jquery.overlayScrollbars.js

我得到一个非常奇怪的路径的编译错误TS2305：

如果我这样做：

import * as OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index"; // ../../libs/npm/overlayScrollbars/js/jquery.overlayScrollbars.js

我收到编译错误TS2349：

和以下智能感知错误：

（（如果您想知道，可能的VS修复程序会将路径变成import OverlayScrollbars from "../../libs/npm/@types/overlayscrollbars/index";）

我真正使之起作用的唯一方法是自己编写JQuery扩展名的声明：

interface JQuery {
    overlayScrollbars(
        options: OverlayScrollbars.Options,
        extensions?: OverlayScrollbars.Extensions
    ): JQuery;
    overlayScrollbars(
        filter?: string | ((element: Element, instance: OverlayScrollbars) => boolean)
    ): OverlayScrollbars | OverlayScrollbars[] | undefined;
}

这样称呼：

$("body").overlayScrollbars({ });

和删除模块导入

我知道声明文件也应该这样做，并且通过检查其内容似乎可以，但是我无法使其工作。

Answer 1

这里的问题是，您没有在文件中导入OverlayScrollbars的实际代码，您当前仅在导入其类型定义。

关于类型定义："../../libs/npm/@types/overlayscrollbars/index"引用@types/overlayscrollbars npm软件包，这是一个仅包含@types/overlayscrollbars的npm软件包（将所有软件包都放在declaration files下）。声明文件是将TypeScript类型添加到JavaScript库的文件，因此可以与TypeScript有效地使用它们。这意味着，因为它们仅声明类型，所以不会在此处执行任何JavaScript行。

这里，您为@types/包导入了该声明文件，这现在使TypeScript能够理解该JS库的类型。但是，您从未真正导入库代码本身。

您应该像编写JS一样导入库。我不知道该库具体导出了什么，但是它应该看起来像这样：

overlayscrollbars

如果不起作用，也请尝试此：

import OverlayScrollbars from "../../libs/npm/overlayscrollbars";

还有这个：

import { OverlayScrollbars } from "../../libs/npm/overlayscrollbars";

因为模块可能会尝试以其他方式导出其符号。 （我不能不进入lib的出口就能知道它们的实际外观））

第二个错误只是告诉您您以错误的方式调用import * as OverlayScrollbars from "../../libs/npm/overlayscrollbars"; ，而第一个参数应为overlayscrollbars。