在 vue 3 + typescript 中处理可空类型需明确声明类型（如 ref(null)）、运行时校验（if (user.value)）、安全访问（?. 操作符）、模板防护（v-if 或 ??）、computed 封装默认值与过滤，并封装为自定义 composable 统一逻辑。
在 Vue 3 + TypeScript 的 Composition API 中处理可空类型（null 或 undefined），核心不是“避开”它们，而是用类型系统明确表达意图，并配合响应式 API 做安全访问。关键在于声明时就定好类型边界，运行时做必要校验，而不是靠侥幸或 any 混过去。
明确声明可空类型的 ref 或 reactive
不要让 TypeScript 推导出宽松类型。比如用户数据初始为空，就该显式写成 ref<user null>(null)</user>，而不是 ref(null)——后者会让 TypeScript 推导为 Ref<unknown></unknown>，失去类型保护。
- 基础类型可空：用联合类型，如
ref<string null>(null)</string>、ref<number undefined>(undefined)</number> - 对象类型可空：推荐
ref<user null>(null)</user>，比ref<nullable>>(null)</nullable>更直白，也避免泛型嵌套带来的 IDE 提示延迟 - 数组可空：常见误区是
ref<user>([])</user>，但若后端可能返回null，应写成ref<user null>(null)</user>
访问前必须做空值检查
ref.value 或 reactive 属性访问不自动跳过 null。TypeScript 的严格模式（"strict": true）会强制你处理这些分支，这是优势，不是负担。
- 简单判空：用
if (user.value)或if (user.value != null)（后者同时排除null和undefined） - 链式访问安全：对
user.value?.profile?.avatar这类路径，确保每一层都声明了可选性（如profile?: Profile），否则 ?. 无法生效 - 模板中也要防错：即使脚本里做了检查，模板里仍建议加
v-if="user.value"或使用{{ user.value?.name || '-' }}避免渲染异常
用 computed 封装带默认值的衍生状态
把空值处理逻辑收进 computed，能让模板和业务逻辑更干净，也便于复用。
- 提供默认值：
const displayName = computed(() => user.value?.name ?? '匿名用户') - 过滤空项：
const validItems = computed(() => list.value?.filter(Boolean) || []) - 状态推导：
const hasData = computed(() => !!user.value && user.value.id > 0)，比到处写user.value?.id更可靠
封装可空逻辑到自定义 Composable
重复的空值处理（如加载中+空态+错误态）适合抽成组合函数，统一行为，也强化类型契约。
- 例如
useApiData<t>()</t>返回{ data: Ref<t null>, loading: Ref<boolean>, error: Ref<string null> }</string></boolean></t> - 内部自动处理请求返回的
null，调用方只需关注data.value是否存在，无需重复判空 - 配合
readonly限制外部修改，防止误赋非预期值（如把null赋给本该是对象的 ref）
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
