Vue3 Store变量别名与空值校验问题：如何消除编译报错？

针对你遇到的assert无法生效、编译器仍提示store.selectedNode可能为null的问题，提供以下几种可行方案：

方案一：控制流类型缩小（推荐） #

通过if判断过滤空值，触发TypeScript的控制流类型分析，直接将非空的store.selectedNode赋值给node，同时保留响应式关联：

<script setup lang="ts">
import { useStore } from '@/util/store'
const store = useStore()

// 提前过滤空值，触发类型缩小
if (!store.selectedNode) {
  throw new Error('selectedNode 不能为空')
}
const node = store.selectedNode
</script>

<template>
  <div>
    <input v-model="node.displayName">
    <input v-model="node.browseName">
  </div>
</template>

方案二：自定义类型断言函数 #

如果想保留assert风格的写法，可以自定义一个带类型断言的函数，让TypeScript正确识别非空类型：

<script setup lang="ts">
import { useStore } from '@/util/store'

// 自定义类型断言函数，确保值非空
function assertIsDefined<T>(val: T): asserts val is NonNullable<T> {
  if (val === null || val === undefined) {
    throw new Error('值不能为空')
  }
}

const store = useStore()
assertIsDefined(store.selectedNode)
const node = store.selectedNode
</script>

<template>
  <div>
    <input v-model="node.displayName">
    <input v-model="node.browseName">
  </div>
</template>

方案三：类型断言直接声明 #

如果能确保运行时store.selectedNode一定非空，可以直接用类型断言跳过类型检查：

<script setup lang="ts">
import { useStore } from '@/util/store'
const store = useStore()

// 直接断言为非空类型
const node = store.selectedNode as NonNullable<typeof store.selectedNode>
</script>

<template>
  <div>
    <input v-model="node.displayName">
    <input v-model="node.browseName">
  </div>
</template>

方案四：响应式计算属性包裹 #

如果需要保持响应式且不想处理空值逻辑，可使用computed配合非空断言：

<script setup lang="ts">
import { useStore } from '@/util/store'
import { computed } from 'vue'

const store = useStore()
// 用computed包裹，非空断言告诉TypeScript值存在
const node = computed(() => store.selectedNode!)
</script>

<template>
  <div>
    <input v-model="node.value.displayName">
    <input v-model="node.value.browseName">
  </div>
</template>

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