在 Svelte 中使用 TypeScript 为 Prop 设置类型

本文介绍了在 Svelte 中使用 TypeScript 为组件的 prop 设置类型的两种方法，重点解决在使用虚拟列表等组件时，如何确保传递的 item 具有特定的类型，避免 TypeScript 编译错误。通过自定义类型声明或使用类型断言，可以有效地解决类型检查问题，提升代码质量。

在 Svelte 中使用 TypeScript 可以提高代码的健壮性和可维护性。当涉及到组件间的 props 传递时，明确指定 props 的类型至关重要，尤其是在使用像虚拟列表这样的复杂组件时。本文将介绍两种方法，帮助你解决在 Svelte 中使用 TypeScript 为 prop 设置类型的问题。

方法一：自定义类型声明

这种方法需要你为组件编写自己的类型声明，定义一个泛型参数，用于指定 items 和插槽属性 item 的类型。这需要你熟悉 svelte 包中用于描述组件接口的各种类型。

1. 研究 SvelteKit 生成的类型： 首先，可以查看通过 SvelteKit 构建组件时生成的类型。你可以创建一个使用泛型的组件，并观察它是如何转换的。相关的语法应该在对应的 RFC 中有描述 (例如: https://www.php.cn/link/f1a83118e2c5697f6679b2ce354e7f8d)。

   

   百度文心百中

   百度大模型语义搜索体验中心

   22

   查看详情
   

2. 创建类型声明文件： 创建一个 .d.ts 文件（例如 VirtualList.d.ts），并在其中定义 VirtualList 组件的类型。

   // VirtualList.d.ts
import { SvelteComponentTyped } from 'svelte';
interface VirtualListProps<T> {
items: T[];
itemHeight: number;
containerHeight: number;
scrollTop: number;
}
interface VirtualListEvents {
// Define any events the component emits here
}
interface VirtualListSlots<T> {
default: {
item: T;
dummy: boolean;
y: number;
};
}
export class VirtualList<T> extends SvelteComponentTyped<
VirtualListProps<T>,
VirtualListEvents,
VirtualListSlots<T>
> {}

3. 使用类型声明： 现在，你可以在你的 Svelte 组件中使用这个类型声明，并指定 item 的类型。

   <script lang="ts">
import { VirtualList } from './VirtualList'; // 假设 VirtualList.svelte 在同一目录下
import BookRowEntry from './BookRowEntry.svelte';
interface BookClass {
id: number;
title: string;
pg: number;
indexts: number;
}
let books: BookClass[] = [
{ id: 1, title: 'Book 1', pg: 100, indexts: 1 },
{ id: 2, title: 'Book 2', pg: 200, indexts: 2 },
{ id: 3, title: 'Book 3', pg: 300, indexts: 3 },
];
let itemHeight = 30;
let containerHeight = 300;
let scrollTop = 0;
</script>
<VirtualList<BookClass> items={books} {itemHeight} {containerHeight} {scrollTop} let:item let:dummy let:y>
<div class="book" class:dummy>
{#if !dummy}
<BookRowEntry {item} />
{/if}
</div>
</VirtualList>

   // BookRowEntry.svelte
<script lang="ts">
export let item: { id: number; title: string; pg: number; indexts: number; };
</script>
<div>
#{item.id} - {item.title}
</div>

方法二：类型断言

这种方法是一种“hack”的方式，通过在模板中使用函数进行类型断言。虽然不如第一种方法优雅，但在某些情况下可能更简单快捷。

1. 定义类型断言函数： 在 <script> 标签中定义一个函数，该函数接受一个参数并将其作为 any 类型返回，或者更具体地，断言为你的 BookClass 类型。

   <script lang="ts">
import BookRowEntry from './BookRowEntry.svelte';
interface BookClass {
id: number;
title: string;
pg: number;
indexts: number;
}
let books: BookClass[] = [
{ id: 1, title: 'Book 1', pg: 100, indexts: 1 },
{ id: 2, title: 'Book 2', pg: 200, indexts: 2 },
{ id: 3, title: 'Book 3', pg: 300, indexts: 3 },
];
let itemHeight = 30;
let containerHeight = 300;
let scrollTop = 0;
function any(item: any): any {
return item;
}
// 或者更具体的类型断言
function asBook(item: any): BookClass {
return item as BookClass;
}
</script>

2. 在模板中使用类型断言函数： 在模板中使用该函数来断言 item 的类型。

   <VirtualList items={books} {itemHeight} {containerHeight} {scrollTop} let:item let:dummy let:y>
<div class="book" class:dummy>
{#if !dummy}
{@const book = any(item)} <!-- 或者 {@const book = asBook(item)} -->
<BookRowEntry item={book} />
{/if}
</div>
</VirtualList>

注意事项

• 类型安全： 自定义类型声明的方法更安全，因为它在编译时提供了类型检查。类型断言则绕过了 TypeScript 的类型检查，可能导致运行时错误。
• Svelte 模板限制： 目前，Svelte 模板不支持直接使用 TypeScript 语法。因此，类型断言需要在 <script> 标签中定义函数来实现。
• SvelteKit： 使用 SvelteKit 可以更方便地管理类型，因为它会自动生成类型声明文件。
• 性能： 虽然类型断言看起来更简单，但在大型项目中，自定义类型声明可以提高代码的可维护性和性能。

总结

本文介绍了两种在 Svelte 中使用 TypeScript 为 prop 设置类型的方法。自定义类型声明提供了更强的类型安全性和可维护性，而类型断言则是一种更快速的解决方案。选择哪种方法取决于你的项目需求和个人偏好。记住，在大型项目中，优先考虑类型安全性和可维护性，选择自定义类型声明可能更合适。