在 Typescript 中使用未类型化的 JavaScript 模块：属性在类型 'unknown' 上不存在

我正在使用 Typescript 开发一个新的 Svelte 项目。我还在使用 svelte-mui 组件模块，但它不是用 Typescript 编写的，也没有类型文件。每当我尝试使用一个组件时，VSCode 就会用恼人的红色波浪线标出该组件，因为 Typescript 不知道该对象包含的 Svelte 属性。项目可以正常构建和运行，但我想弄清楚如何告诉 Typescript 它们的类型。我知道所有组件都继承自 SvelteComponent，但我不知道如何告诉 Typescript 这一点。

<script>
import Button from 'svelte-mui';
</script>

<Button on:click={() => {console.log('Clicked')}}>My Button</Button>

最后一行将在编辑器中被标记为错误。

我如何告诉 Typescript Button 继承自 SvelteComponent？

编辑：@tmdesigned

我按照下面tmdesigned提供的链接中的说明操作了，但没有成功。我是Typescript的新手，所以也许我仍然做错了什么。最后我得到了一个位于

types\svelte-mui\index.d.ts

那包含

declare module 'svelte-mui' {
    import { SvelteComponent } from "svelte/internal";

    class Button extends SvelteComponent{}

    export { Button }
}

但是错误仍然存在。

答案＃1

我在使用 Svelte Material UI 时遇到了类似的错误，但解决方案应该可以转化为 svelte-mui。

首先，在 tsconfig.json 中配置 typeRoots，以便编译器在 types 目录中找到你的声明文件：

{
  "compilerOptions": {
     ...
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  }
}

确保不要像你提到的链接页面所建议的那样，将“types”添加到exclude列表中。我认为那会阻止编译器使用你的声明文件。

然后，将 types/svelte-mui/index.d.ts 更新为：

declare module 'svelte-mui' {
  import type { SvelteComponent } from "svelte";

  class Button extends SvelteComponent { }
  export default Button;
}

重启 VSCode 或运行 “Svelte: Restart Language Server” 命令，以确保它使用新的配置。你的 Button 组件不应再显示错误。