如何基于isLoggedIn Ref实现TypeScript对User Ref的类型收窄？

问题描述 #

尝试创建isLoggedIn布尔Ref来关联user Ref（类型为User | null）的登录状态，期望通过检查isLoggedIn.value让TypeScript自动收窄user.value的类型，但当前实现无法达到预期，TypeScript仍报错提示user.value可能为null。

原代码问题分析 #

原代码中通过条件类型定义的IsLoggedInType会被TypeScript解析为固定的boolean类型——因为typeof user.value是User | null，条件类型无法动态关联user和isLoggedIn的运行时状态。因此isLoggedIn只是普通的Ref<boolean>，TypeScript无法识别两者之间的类型依赖关系，导致类型收窄失效。

解决方案 #

方案1：使用computed替代ref（推荐） #

Vue的computed会自动建立与依赖Ref的响应式关联，TypeScript能正确识别这种关系并完成类型收窄：

test.ts

import { ref, computed } from 'vue'

type User = {
  id: number;
  email: string;
};

const user = ref<User | null>(null);
// 自动推导类型，与user状态实时同步
const isLoggedIn = computed(() => user.value !== null);

export { user, isLoggedIn }

App.vue

<script setup>
import { user, isLoggedIn } from './test.ts';

// 正确用法：isLoggedIn为true时，user.value自动收窄为User
if (isLoggedIn.value) {
  console.log(user.value.id + 1); // 类型安全，无报错
}

// 注意：isLoggedIn为false时，user.value是null，无法访问id
if (!isLoggedIn.value) {
  // console.log(user.value.id + 1); // 此处会触发TypeScript报错，符合预期
}
</script>

方案2：自定义类型守卫（适配必须使用ref的场景） #

若因业务需求必须使用ref而非computed，可通过自定义类型守卫函数手动关联两者的类型关系：

test.ts

import { ref } from 'vue'

type User = {
  id: number;
  email: string;
};

const user = ref<User | null>(null);
const isLoggedIn = ref(false);

// 统一更新user和isLoggedIn的状态，确保两者同步
function updateUser(newUser: User | null) {
  user.value = newUser;
  isLoggedIn.value = newUser !== null;
}

// 自定义类型守卫，断言user为非null的Ref<User>
function checkIsLoggedIn(): user is Ref<User> {
  return isLoggedIn.value && user.value !== null;
}

export { user, isLoggedIn, updateUser, checkIsLoggedIn }

App.vue

<script setup>
import { user, checkIsLoggedIn } from './test.ts';

if (checkIsLoggedIn()) {
  console.log(user.value.id + 1); // 类型安全，无报错
}
</script>

方案对比 #

• 方案1（computed）：代码简洁，自动同步状态，TypeScript类型推导完美，是最优解。
• 方案2（类型守卫）：需手动维护状态同步，代码量较大，仅适用于无法使用computed的特殊场景。

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