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 定义,提升开发效率和代码质量。