Svelte中#each循环内LabelType类型转换及类型错误解决

问题原因 #

你当前的labelStore在JS文件中定义，初始空数组被TypeScript推断为never[]，导致遍历的lbl类型为never，无法访问LabelType的属性。

解决方案 #

1. 改用TypeScript文件定义Store（推荐） #

将stores.js重命名为stores.ts，并给writable指定泛型类型：

import { writable } from "svelte/store";
// 导入你的LabelType类型，路径根据实际情况调整
import type { LabelType } from "./types";

// 明确指定store存储的是LabelType数组
export const labelStore = writable<LabelType[]>([]);

2. 在JS文件中用JSDoc指定类型 #

如果不想修改文件后缀，可通过JSDoc为Store标注类型：

import { writable } from "svelte/store";

/** 
 * @type {import('svelte/store').Writable<LabelType[]>}
 * 确保LabelType已在当前文件定义或通过导入引入
 */
export const labelStore = writable([]);

3. 在组件内临时类型断言（仅应急，不推荐） #

如果只需要在组件内临时解决，可对lbl做类型断言：

<main>
    {#each $labelStore as lbl, index}
        {@const typedLbl = lbl as LabelType}
        <div>Index {index}</div>
        <div>Image URL: {typedLbl.imageURL}</div>
        <div>Frame #: {typedLbl.frameNumber}</div>
        <div>Point x: {typedLbl.pointX}</div>
        <div>Point y: {typedLbl.pointY}</div>
        <div>Agent: {typedLbl.agent}</div>
        <div>Action: {typedLbl.action}</div>
        <div>--------------------------------</div>
    {/each}
</main>

最佳实践 #

优先在Store层面指定类型，这样整个应用中使用labelStore时都能获得正确的类型提示，避免重复编写类型断言，提升代码可维护性。

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