Nuxt3中useState初始化空对象的TypeScript错误修复咨询

问题场景 #

想在Nuxt3的useState中以空对象作为初始值，后续动态添加键值对，但当前代码触发TypeScript类型错误，错误信息如下：

Argument of type 'Ref<{} | AnimalContext>' is not assignable to parameter of type 'Ref<AnimalContext>'.
  Type '{} | AnimalContext' is not assignable to type 'AnimalContext'.
    Type '{}' is missing the following properties from type 'AnimalContext': name, age, sizets(2345)

相关代码（composables/useStateAnimal.ts）：

import type { Ref } from 'vue';

interface AnimalContext {
    name: string;
    age: number;
    size: string;
    [key: string]: string | number;
}

export const useStateAnimal = () => {
    // state
    const data: Ref<AnimalContext | {}> = useState('animal', () => ({}));
    // state update function
    const updateAnimal = (data: Ref<AnimalContext>) => (keyName: string, newVal: string|number) => {
        data.value[keyName] = newVal;
    }

    return {
        data: readonly(data), 
        updateAnimal: updateProject(data), // 错误发生在这里
    }
}

修复方案 #

1. 统一类型定义 #

你的AnimalContext接口已包含索引签名[key: string]: string | number，空对象本身符合该接口规范（后续会补充必填字段），无需使用联合类型Ref<AnimalContext | {}>，直接将data的类型定义为Ref<AnimalContext>，并通过类型断言告诉TypeScript空对象符合接口要求。

2. 修正函数名称拼写错误 #

代码中调用的updateProject是笔误，应改为updateAnimal。

3. 可选：优化键名类型约束 #

为避免传入非法键名，可给keyName添加类型约束，限定为AnimalContext的键名或字符串。

修改后的完整代码：

import type { Ref } from 'vue';
import { readonly, useState } from '#imports';

interface AnimalContext {
    name: string;
    age: number;
    size: string;
    [key: string]: string | number;
}

export const useStateAnimal = () => {
    // 统一类型为AnimalContext，用类型断言标记空对象符合接口
    const data: Ref<AnimalContext> = useState('animal', () => ({} as AnimalContext));
    // 限定keyName为接口键名或字符串，增强类型安全性
    const updateAnimal = (data: Ref<AnimalContext>) => (
        keyName: keyof AnimalContext | string, 
        newVal: string | number
    ) => {
        data.value[keyName] = newVal;
    }

    return {
        data: readonly(data), 
        updateAnimal: updateAnimal(data), // 修正函数名称
    }
}

说明 #

• 类型断言as AnimalContext解决了空对象与AnimalContext接口的类型匹配问题，后续动态添加字段后，状态会完全符合接口定义。
• 索引签名保证了可以自由添加任意字符串键的属性，值类型与接口要求一致。
• 修正后updateAnimal函数的参数类型统一，不再出现联合类型冲突。

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