如何解决TypeScript带Partial的Loading类型守卫在Vue中的窄化失效问题？

方案1：使用可辨识联合类型（推荐） #

通过给加载状态添加明确的辨识属性，让TypeScript能精准区分已加载和加载中状态，既解决第三方函数的类型推断问题，又保留无需守卫访问部分属性的能力：

// 定义加载中的状态类型，添加辨识属性type
interface LoadingState<T> {
  type: 'loading';
  restStatus: number;
  // 保留Partial<T>以支持访问部分属性
  [key: keyof T]?: T[key];
}

// 已加载状态就是原类型T，确保它没有type属性（或type为never）
type LoadedState<T> = T & { type?: never };

// 重构Loading类型为可辨识联合
type Loading<T> = LoadedState<T> | LoadingState<T>;

// 类型守卫函数基于辨识属性判断
function isLoaded<T>(data: Loading<T>): data is LoadedState<T> {
  return (data as LoadingState<T>).type !== 'loading';
}

优势： #

• 可辨识联合是TypeScript中最可靠的联合类型区分方式，Vue的watch/computedAsync等第三方函数能正确识别类型守卫的窄化效果
• LoadingState保留了Partial，无需类型守卫即可访问T的可选属性，适配遗留代码需求
• 类型逻辑清晰，避免原方案中交叉类型带来的推断模糊问题

方案2：增强类型守卫的判断逻辑 #

如果不想修改原类型结构，可以优化类型守卫的判断条件，让TypeScript更精准地识别类型边界：

interface _LoadingStatus {
  restStatus: number;
}

type Loading<T> = T | (_LoadingStatus & Partial<T>);

// 更严格的类型守卫：明确检查restStatus的类型，排除模糊情况
function isLoaded<T>(data: Loading<T>): data is T {
  return !(
    typeof data === 'object' &&
    data !== null &&
    'restStatus' in data &&
    typeof (data as _LoadingStatus).restStatus === 'number'
  );
}

针对Vue第三方函数的适配 #

如果仍存在推断问题，可以通过封装工具函数明确泛型类型，避免显式指定回调参数的繁琐：

// 封装watch的工具函数，明确泛型类型
function watchLoading<T>(source: () => Loading<T>, callback: (data: Loading<T>) => void) {
  watch(source, callback);
}

// 使用示例
watchLoading(() => myAsyncData, (data) => {
  if (isLoaded(data)) {
    // 这里data会被正确窄化为T类型
    console.log(data.fullProperty);
  } else {
    // 这里data是_LoadingStatus & Partial<T>
    console.log(data.restStatus, data.partialProperty);
  }
});

方案3：拆分类型职责（折中方案） #

如果可辨识联合的改动较大，可以拆分出两个类型，分别适配不同场景：

interface _LoadingStatus {
  restStatus: number;
}

// 用于遗留代码：无需守卫即可访问部分属性
type LoadingPartial<T> = _LoadingStatus & Partial<T>;

// 用于需要严格窄化的场景：纯联合类型
type LoadingStrict<T> = T | _LoadingStatus;

// 通用类型守卫
function isLoaded<T>(data: LoadingPartial<T> | LoadingStrict<T>): data is T {
  return !(typeof data === 'object' && data !== null && 'restStatus' in data);
}

适用场景： #

• 遗留代码继续使用LoadingPartial
• Vue的watch/computedAsync等场景使用LoadingStrict，确保类型守卫正常工作

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