在 Svelte 中使用 TypeScript 为 Prop 设置类型-js教程-PHP中文网

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

聖光之護

发布： 2025-10-23 11:30:01

原创

717人浏览过

在 svelte 中使用 typescript 为 prop 设置类型

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

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

方法一：自定义类型声明

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

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

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

22

查看详情
创建类型声明文件： 创建一个 .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>
   > {}

登录后复制

使用类型声明： 现在，你可以在你的 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 style="top:{y}px;">
       {#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”的方式，通过在模板中使用函数进行类型断言。虽然不如第一种方法优雅，但在某些情况下可能更简单快捷。

定义类型断言函数： 在 <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>

登录后复制

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

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

登录后复制

注意事项

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