Vue.js 3中如何为reactive()对象指定TypeScript接口

你当前写法不生效的核心原因是：调用reactive()时既没有传入初始值，也没有显式指定泛型参数，TypeScript无法将其和你预先定义的ProdutoInterface关联起来。

推荐写法（声明即传符合类型的初始值） #

这是类型安全性最高的写法，直接在调用reactive时通过泛型指定绑定的接口，同时传入符合接口约束的初始值，TS会自动做类型校验，属性写错、类型不匹配都会直接在编译阶段报错：

import { reactive } from 'vue'
// 接口使用type导入，符合TS最佳实践
import type { ProdutoInterface } from '对应接口文件路径'

const dadosProduto = reactive<ProdutoInterface>({
  codigo: 0, // 数字类型初始值
  nome: ''   // 字符串类型初始值
})

特殊场景：声明时无法提供完整初始值 #

如果受业务逻辑限制，声明响应式对象的时候拿不到完整的属性值，不能直接传空对象调用reactive()，可以根据场景选以下两种方案：

• 方案1：调整接口定义，将暂时无法初始化的属性设为可选
  适合属性本身就可能不存在的场景：

  export interface ProdutoInterface {
    codigo?: number
    nome?: string
  }
  // 此时可以直接传空对象初始化
  const dadosProduto = reactive<ProdutoInterface>({})
  

• 方案2：使用类型断言跳过初始化校验
  如果你确定后续逻辑一定会给所有属性赋值，不想把接口改成可选，可以用类型断言做临时处理，注意需要自行保证后续属性赋值的完整性：

  const dadosProduto = reactive<ProdutoInterface>({} as ProdutoInterface)
  // 后续拿到数据后再给属性赋值
  dadosProduto.codigo = 1001
  dadosProduto.nome = '智能手机'
  

注意事项 #

*不要直接整体替换reactive声明的对象（比如dadosProduto = 新对象），这种操作会直接丢失响应性。如果需要整体更新对象属性，用Object.assign(dadosProduto, 新对象)的方式合并，或者改用ref<ProdutoInterface>()来存储对象类型的响应式数据。

内容的提问来源于stack exchange，提问作者marcelo.delta