如何在TypeScript中使用OverlayScrollbars？
我正在使用ASP.NET Core 3.0项目和VS 2019集成开发环境学习TypeScript。我已经使用npm：https://kingsora.github.io/OverlayScrollbars/#!overview下载了OverlayScrollbars插件。
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>我特别这样做是为了避免我在这里写的这些问题，无论我是尝试使用OVerlayScrollbars的JQuery还是Vanilla版本都无关紧要。
据我所知，对于导入，如果我想让它工作，浏览器需要指向具有显式.js扩展名的JavaScript文件。
为了解决这个问题，我让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
以及以下intellisense错误：
(如果你想知道的话，潜在的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({ });和删除模块导入
我知道这也是声明文件应该做的事情，通过检查它的内容，它似乎是这样做的，但我不能让它工作。
回答 1
Stack Overflow用户
发布于 2019-11-22 09:29:23
这里的问题是，你没有在你的文件中导入OverlayScrollbars的实际代码，你目前只导入了它的类型定义。
在类型定义上："../../libs/npm/@types/overlayscrollbars/index"引用了@types/overlayscrollbars npm包，这是一个只包含declaration files的npm包(即@types/下的所有包)。声明文件是将TypeScript类型添加到JavaScript库中的文件，以便可以在TypeScript中有效地使用它们。这意味着，因为它们只声明类型，所以没有一个JavaScript行将在那里执行。
在这里，您导入了overlayscrollbars包的声明文件，这使得TypeScript能够理解该JS库的类型。但是，您从未真正导入过库代码本身。
您应该像编写JS一样导入库。我不知道这个库具体导出了什么，但它应该是这样的：
import OverlayScrollbars from "../../libs/npm/overlayscrollbars";如果不起作用，也可以试试这个：
import { OverlayScrollbars } from "../../libs/npm/overlayscrollbars";还有这个：
import * as OverlayScrollbars from "../../libs/npm/overlayscrollbars";因为模块可能尝试以不同的方式导出其符号。(如果不进入lib的导出并实际看到它们的样子，我就无法判断)
第二个错误只是告诉您调用overlayscrollbars的方式是错误的，并且第一个参数应该是string。
https://stackoverflow.com/questions/58965077
复制
腾讯云开发者
