Vite搭建的Svelte Typescript项目无法导入Writable<T>接口如何解决

Writable是仅存在于编译阶段的TypeScript类型接口，不属于svelte/store包的运行时导出成员。你当前的导入写法没有标记Writable为类型导入，会导致TS编译后仍保留该导入语句，浏览器加载运行时模块时找不到对应导出就会抛出语法错误。

直接调整导入语句，用TypeScript的仅类型导入语法标记Writable即可，有两种常用写法：

• 写法1（TS 4.5及以上版本推荐，可合并写在同一导入语句）

  import { writable, derived, type Writable } from 'svelte/store';
  

• 写法2（兼容旧版TS，分开导入类型和运行时成员）

  import { writable, derived } from 'svelte/store';
  import type { Writable } from 'svelte/store';
  

// 正确导入后即可正常标注store类型
interface Todo {
  id: number;
  content: string;
  done: boolean;
}

// 显式声明Writable类型的store
const todoList: Writable<Todo[]> = writable([]);

额外说明：Vite官方生成的Svelte+TypeScript项目默认已经配置了适配该语法的编译规则，修改导入语句后即可直接生效，不需要额外调整其他配置。

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