如何正确处理值可能为undefined的Svelte派生Store？

问题分析 #

你当前的场景是：存在一个可能为undefined的Readable Store，其内部包含一个isLoading: Writable<boolean>状态，需要将这个内部状态转换为直接的Readable<boolean>，而非Readable<Writable<boolean> | undefined>。

为什么最初的实现不符合预期 #

const isLoading = derived(this.obj, (obj) => obj?.isLoading);

这段代码的问题在于，obj?.isLoading返回的是Writable<boolean>实例（当obj存在时），所以derived生成的Store会直接传递这个Writable对象，最终得到Readable<Writable<boolean> | undefined>，并非你需要的布尔值流。

你写出的代码原理解释 #

const isLoading = derived(this.obj, (obj, set) => obj?.isLoading.subscribe(set))

这段代码能正常工作的核心逻辑：

1. derived的第二个参数若为接收(value, set)的函数，当源Store（this.obj）更新时，该函数会被触发。
2. 如果函数返回取消订阅函数（subscribe方法的返回值就是取消订阅的函数），derived会自动管理订阅生命周期：源Store值变化时，先调用之前的取消订阅函数，再执行新的订阅逻辑。
3. obj?.isLoading.subscribe(set) 是将内部isLoading Store的每一次值变化，通过set函数同步到derived生成的Store中，最终Store直接输出布尔值。

TypeScript类型问题解决

这段代码返回Readable<unknown>是因为TypeScript无法自动推导set函数的参数类型，可通过以下两种方式修复：

方式1：显式指定泛型

const isLoading = derived<boolean>(this.obj, (obj, set) => {
  if (obj) {
    return obj.isLoading.subscribe(set);
  }
  // obj为undefined时设置默认加载状态
  set(false);
});

方式2：手动指定set的参数类型

const isLoading = derived(this.obj, (obj, set: (value: boolean) => void) => {
  return obj?.isLoading.subscribe(set);
});

其他实现方式 #

方式1：手动管理订阅（更直观） #

如果觉得derived的订阅逻辑不够清晰，可手动创建Writable Store，再订阅源Store和内部Store：

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

const isLoading = writable(false);

// 订阅父Store的变化
const unsubscribeParent = this.obj.subscribe((currentObj) => {
  // 先取消之前对内部isLoading的订阅
  let unsubscribeInner: (() => void) | undefined;

  if (currentObj) {
    // 订阅内部isLoading，同步值到新Store
    unsubscribeInner = currentObj.isLoading.subscribe((loading) => {
      isLoading.set(loading);
    });
  } else {
    // 父Store为undefined时重置状态
    isLoading.set(false);
  }

  // 返回取消内部订阅的函数，父Store更新时自动调用
  return unsubscribeInner;
});

// 后续不需要时记得取消父订阅
// unsubscribeParent();

方式2：使用自定义操作符（适合复杂场景） #

如果需要频繁处理“从可选对象中提取内部Store”的场景，可封装一个switchMap操作符：

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

function switchMap<T, U>(fn: (value: T) => Readable<U>): (source: Readable<T>) => Readable<U> {
  return (source) => {
    return derived(source, (value, set) => {
      const innerStore = fn(value);
      return innerStore.subscribe(set);
    });
  };
}

// 使用示例
const isLoading = switchMap((obj) => obj?.isLoading ?? writable(false))(this.obj);

派生Store与undefined处理示例 #

示例1：提取可选对象的普通属性 #

interface User {
  name: string;
  age: number;
}

const userStore: Readable<User | undefined> = writable(undefined);

// 派生用户名，默认空字符串
const userName = derived(userStore, (user) => user?.name ?? '');

// 派生用户年龄，默认0
const userAge = derived(userStore, (user) => user?.age ?? 0);

示例2：多层嵌套Store的处理 #

interface PageState {
  content: Writable<string>;
  loading: Writable<boolean>;
}

const appStore: Readable<{ currentPage: PageState | undefined }> = writable({
  currentPage: undefined
});

// 派生当前页面的加载状态
const currentPageLoading = derived(appStore, (state, set) => {
  const page = state.currentPage;
  if (page) {
    return page.loading.subscribe(set);
  }
  set(false);
});

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