You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

无法为Svelte派生store应用TypeScript类型引发TS报错

我在Svelte中实现了可正常运行的名为selectedDocument的derived派生store,当尝试为其添加正确的TypeScript类型标注时,出现了如下TS lint报错,同时编辑器IntelliSense智能提示无法正常工作:

TS Linting errors

在selectedDocument store的定义位置

Expected 2 type arguments, but got 1.ts(2558)

在([$selectedDocId, $userDocuments])位置

Type '{ view_id: never; user_id: never; doc_id: never; user_name: never; user_avatar: never; cardMap: never; cards: never; }' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
相关代码

该store本身运行逻辑正常,对应类型在其他同类数据场景下可正常生效。

Interfaces 接口定义

export interface MainView {
  view_id: string;
  user_id: string;
  doc_id: string;
  user_name: string;
  user_avatar: string;
  cardMap: CardMap;
  cards: {
    [key: string]: Card;
  };
}
export interface Document {
    doc_id: string;
    createDate: Date;
    createdBy: string;
    title: string;
  }

Stores 状态存储定义

const userDocuments = writable<Document[]>(); 

const selectedDocId = writable<string>(""); // Selected document Id

const selectedDocument = derived<Document>(
  [selectedDocId, userDocuments],
  ([$selectedDocId, $userDocuments]) =>
    getObjByIdReturnOneObj($userDocuments, $selectedDocId, "doc_id")
);

其中getObjByIdReturnOneObj方法接收文档数组作为入参,返回单个匹配的对象(返回结果非数组格式)。

问题原因
  • derived的泛型参数传参规则不匹配:当传入多个依赖store组成的数组作为依赖时,derived需要接收2个泛型参数:第一个是所有依赖store自身类型组成的元组,第二个是派生store最终输出的值类型。代码中仅传入1个泛型参数,TS无法正确推导依赖数组的解构规则,直接触发两个报错。
  • 错误的泛型参数会让TS把传入的依赖数组误认为是单个依赖store的返回值,尝试解构时发现该值没有实现迭代器接口,就会抛出第二个可迭代性相关的错误。
修复方案

二选一即可:

  1. 补全两个泛型参数,显式声明所有类型:
import type { Writable } from 'svelte/store';

const selectedDocument = derived<[Writable<string>, Writable<Document[]>], Document>(
  [selectedDocId, userDocuments],
  ([$selectedDocId, $userDocuments]) =>
    getObjByIdReturnOneObj($userDocuments, $selectedDocId, "doc_id")
);
  1. 省略依赖类型的泛型声明,仅在回调函数处标注返回值类型,让TS自动推导依赖类型,写法更简洁:
const selectedDocument = derived(
  [selectedDocId, userDocuments],
  ([$selectedDocId, $userDocuments]): Document =>
    getObjByIdReturnOneObj($userDocuments, $selectedDocId, "doc_id")
);

注意:如果getObjByIdReturnOneObj在未查询到匹配文档时会返回undefined,请将返回值类型标注为Document | undefined,避免空值类型漏判。

内容的提问来源于stack exchange,提问作者Paul A

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 02:57:20