无法为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的返回值,尝试解构时发现该值没有实现迭代器接口,就会抛出第二个可迭代性相关的错误。
修复方案
二选一即可:
- 补全两个泛型参数,显式声明所有类型:
import type { Writable } from 'svelte/store'; const selectedDocument = derived<[Writable<string>, Writable<Document[]>], Document>( [selectedDocId, userDocuments], ([$selectedDocId, $userDocuments]) => getObjByIdReturnOneObj($userDocuments, $selectedDocId, "doc_id") );
- 省略依赖类型的泛型声明,仅在回调函数处标注返回值类型,让TS自动推导依赖类型,写法更简洁:
const selectedDocument = derived( [selectedDocId, userDocuments], ([$selectedDocId, $userDocuments]): Document => getObjByIdReturnOneObj($userDocuments, $selectedDocId, "doc_id") );
注意:如果
getObjByIdReturnOneObj在未查询到匹配文档时会返回undefined,请将返回值类型标注为Document | undefined,避免空值类型漏判。
内容的提问来源于stack exchange,提问作者Paul A
相关产品推荐
相关产品推荐

