用于导出属性的 svelte 组件库智能感知

Question

我基于这个 GitHub Repo 为自己创建了一个小型组件库： https://github.com/sveltejs/component-template

这很好用，我已经上传到 npm。

当我想在另一个项目中使用我的组件时，我只需安装并使用它们。这也很好用。我唯一没有得到的是 VSCode.

中组件的导出属性的 Intellisense

我必须在我的组件库中添加什么才能在我使用它们的项目中获得一些基本的 Intellisense？

Answer 1

您必须将 svelte.config.js 文件添加到 projects-root 目录。可以为 css、html 和 js/ts.

配置突出显示、code-complete 和其他内容

看看： https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode

Answer 2

为此使用 SvelteComponentTyped 实用程序 class：

declare module "myModule" {
  import { SvelteComponentTyped } from 'svelte';
  
  export class MyComponent extends SvelteComponentTyped<
    { propA: boolean },
    { someEvent: CustomEvent<string>; click: MouseEvent }> {}
}

Old/Outdated 回答

目前还没有正式的方法。 This RFC 提出了一种方法。如果它被接受并实施，您将编写一个 d.ts 定义文件，内容如下：

import { SvelteComponent } from 'svelte';

declare module "myModule" {
  export class MyComponent extends SvelteComponent<
    { propA: boolean },
    { someEvent: CustomEvent<string>; click: MouseEvent }> {}
}

如果您不想等待，可以复制定义 from here，这很可能会成为官方类型定义，稍后再将其切换出去 - 但您已收到警告。

用于导出属性的 svelte 组件库智能感知

svelte component-library intellisense for exported properties

svelte

Old/Outdated 回答