Svelte中如何在#each循环里为每个元素指定类型？

Svelte的模板语法不支持直接在{#each}的as子句里添加类型注解（比如你尝试的user:User写法），但可以通过以下方式实现类型安全：

1. 利用TypeScript的自动类型推断 #

只要你在<script lang="ts">块中给数据源正确标注数组类型，循环中的元素会自动被推断为对应类型：

<script lang="ts">
type User = {
  name: string;
  id: number;
};

// 明确标注userData为User[]类型
let userData: User[] = [{ id: 1, name: "John" }, { id: 2, name: "Harry" }];
</script>

{#each userData as user, index}
  <h1>ID: {user.id}</h1>
  <h1>User name: {user.name}</h1>
{/each}

此时编辑器会自动识别user的类型为User，提供对应的代码提示和类型校验。

2. 处理类型不明确的数据源 #

如果你的数据源是从API获取的原始数据（比如初始为any[]类型），可以在script块中先通过类型断言将其转为目标数组类型：

<script lang="ts">
type User = {
  name: string;
  id: number;
};

// 模拟API获取的原始数据
const rawData: any[] = await fetch("/api/users").then(res => res.json());
// 将原始数据断言为User[]类型
let userData = rawData as User[];
</script>

{#each userData as user, index}
  <h1>ID: {user.id}</h1>
  <h1>User name: {user.name}</h1>
{/each}

注意事项 #

• 确保组件的script标签添加了lang="ts"属性，启用TypeScript支持
• 避免在模板中直接写类型断言，尽量在script块中完成类型处理，保持模板简洁

内容的提问来源于stack exchange，提问作者sagar007