CODEWITHSUNDEEP
javascripttypescriptsvelte-3
Brent Parker
Brent Parker

Reputation: 739

Using untyped javascript modules with Typescript: Property does not exist on type 'unknown'

I'm working on a new Svelte project using Typescript. I'm also using the svelte-mui component module which was not written in Typescript and does not have a types file. Whenever I try to use a component, VSCode highlights the component with annoying red squiggles because Typescript doesn't know about the svelte properties that are a part of the object. The project builds and runs fine, but I would like to figure out how to tell Typescript what type they are. I know all the components extend SvelteComponent but I don't know how to tell Typescript that.

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

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

The last line will be highlighted as an error in the editor.

How do I tell Typescript that Button extends SvelteComponent?

Edit: @tmdesigned

I followed the instructions in the link provided by tmdesigned below, but no dice. I'm new to Typescript so maybe I'm still doing something wrong. I ended up with a file located at

types\svelte-mui\index.d.ts

that contains

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

    class Button extends SvelteComponent{}

    export { Button }
}

but the error still persists.

Upvotes: 2

Views: 1680

Answers (1)

Max Smolens
Max Smolens

Reputation: 3811

I hit similar errors using Svelte Material UI, but the solution should translate to svelte-mui.

First, configure typeRoots in tsconfig.json so that the compiler finds your declaration file in the types directory:

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

Make sure not to add "types" to the exclude list as suggested by the linked page that you mentioned. I think that would prevent the compiler from using your declaration file.

Then, update types/svelte-mui/index.d.ts to:

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

  class Button extends SvelteComponent { }
  export default Button;
}

Restart VSCode or run the "Svelte: Restart Language Server" command to ensure that it uses the new configuration. Your Button component should no longer show an error.

Upvotes: 1

Related Questions