Open rohankvashisht opened 2 years ago
It looks like maybe you are using TypeScript?
I haven't converted any components to TS yet, so I'm not familiar with what's involved.
Do you have a link to a Svelte component that includes type declarations, so I could get an example?
Alternately, I would accept a pull request to add TS declarations!
It looks like maybe you are using TypeScript?
I haven't converted any components to TS yet, so I'm not familiar with what's involved.
Do you have a link to a Svelte component that includes type declarations, so I could get an example?
Alternately, I would accept a pull request to add TS declarations!
Hey man, Sorry I don't have links to Svelte component that includes type declarations. I don't have much experience with JS, so can't help. I am using standard Svelte packages with VS Code, nothing out of ordinary.
Here's a tool that could help: https://github.com/carbon-design-system/sveld
It can analyze the ProgressBar.svelte
and produce a ProgressBar.d.ts
declaration file for you, this way you'll have type definitions and won't have to rewrite the component in Typescript.
In the meantime, you could define a src/declarations.d.ts
file and put the necessary stuff in there:
declare module 'svelte-progress-bar' {
import type { SvelteComponentTyped } from 'svelte';
export default class ProgressBar extends SvelteComponentTyped<{
color: string;
width: number;
// Other props as you need it
}> {
public start(): void;
public complete(): void;
// Other funcs as you need it
}
}
And now it won't complain in your svelte typed components:
<script lang="ts">
import { navigating } from '$app/stores';
import ProgressBar from 'svelte-progress-bar';
let progress: ProgressBar | undefined;
$: $navigating ? progress?.start() : progress?.complete();
</script>
<ProgressBar color="pink" width={0} bind:this={progress} />
<slot />
@YuukanOO thanks for this! Presumably I would also need to add that to the package.json
file? e.g.
{
"types": "src/declarations.d.ts"
}
My comment was made for a consumer of this lib. For you, the best choice is probably to convert your svelte component to typescript (should be easy) and to expose its type. But I don't know how to do it personally.
When I am using this component in Svelte Kit Framework, VS Code shows a little problem on this line:
import ProgressBar from 'svelte-progress-bar'
On hover, it says:
Here's the screenshot 👇🏼