Sveld 项目使用教程

Sveld 项目使用教程

sveldGenerate TypeScript definitions for your Svelte components项目地址:https://gitcode.com/gh_mirrors/sv/sveld

1. 项目介绍

Sveld 是一个用于生成 Svelte 组件 TypeScript 定义的工具。它通过静态分析 Svelte 组件的 props、events、slots 等信息，生成兼容 Svelte Language Server 的 TypeScript 定义。Sveld 支持使用 JSDoc 注释来定义组件的属性和事件类型，从而提供更强大的类型检查和代码提示功能。

2. 项目快速启动

安装

首先，你需要将 Sveld 安装为开发依赖：

# 使用 npm
npm i -D sveld

# 使用 pnpm
pnpm i -D sveld

# 使用 Bun
bun i -D sveld

# 使用 Yarn
yarn add -D sveld

配置 Rollup

在 Rollup 配置文件中导入并添加 Sveld 插件：

// rollup.config.js
import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import sveld from "sveld";

export default {
  input: "src/index.js",
  output: [
    {
      format: "es",
      file: "lib/index.mjs",
    },
  ],
  plugins: [svelte(), resolve(), sveld()],
};

自定义输出目录

默认情况下，TypeScript 定义会输出到 types 文件夹。你可以通过 typesOptions.outDir 选项自定义输出目录：

sveld({
  typesOptions: {
    outDir: 'dist'
  }
});

3. 应用案例和最佳实践

单组件库

假设你有一个只导出一个组件的库，可以使用 Sveld 生成 TypeScript 定义：

<!-- Button.svelte -->
<script>
  export let type = "button";
  export let primary = false;
</script>

<button {...$$restProps} [type] class:primary on:click>
  <slot>Click me</slot>
</button>

生成的 TypeScript 定义如下：

import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type RestProps = SvelteHTMLElements["button"];

export interface ButtonProps extends RestProps {
  /**
   * @default "button"
   */
  type: string;

  /**
   * @default false
   */
  primary: boolean;
}

export default class Button extends SvelteComponentTyped<ButtonProps, { click: CustomEvent<any> }, {}> {}

多组件库

对于包含多个组件的库，Sveld 同样可以生成相应的 TypeScript 定义。你可以在组件中使用 JSDoc 注释来定义更复杂的类型。

4. 典型生态项目

Carbon Design System

Carbon Design System 是一个基于 Svelte 的 UI 组件库，它使用了 Sveld 来生成 TypeScript 定义，从而提供更好的类型检查和代码提示。

Svelte Language Server

Svelte Language Server 是 Svelte 的官方语言服务器，它与 Sveld 生成的 TypeScript 定义兼容，提供强大的代码编辑和开发体验。

通过以上步骤，你可以快速上手并使用 Sveld 生成 Svelte 组件的 TypeScript 定义，提升开发效率和代码质量。

sveldGenerate TypeScript definitions for your Svelte components项目地址:https://gitcode.com/gh_mirrors/sv/sveld