Vue + TypeScript：如何为computed添加类型注解解决TS2769报错

错误原因 #

你的报错核心是可写computed的get返回值类型和TS推导的泛型不匹配：

• TS会优先从set方法的入参newVal: WalletName推导computed的泛型为WalletName，但你的get方法返回值是WalletName | null，两者类型不一致，触发了重载匹配失败的报错。
• 另外你的代码存在笔误：get方法内写了两次return，也会导致运行异常，需要先删掉多余的return。

修复方案 #

方案1：显式指定computed的泛型（推荐） #

直接给computed传入联合类型作为泛型参数，明确告知TS该可写computed的值类型为WalletName | null即可：

const chosenWallet = computed<WalletName | null>({
  get() {
    return wallet.value ? wallet.value!.name : null;
  },
  // 如果业务中存在给chosenWallet赋值为null的场景，可以同步修改set入参类型
  set(newVal: WalletName | null) {
    // 你的赋值逻辑
  }
})

如果你的业务逻辑中set方法永远只会传入WalletName类型的值，也可以保持set入参类型不变，仅显式声明泛型即可解决报错。

方案2：调整get返回值适配推导类型 #

如果你可以确定wallet.value永远不为空，或者空场景下可以返回一个合法的WalletName默认值，也可以直接修改get方法的返回值适配TS推导的类型：

const chosenWallet = computed({
  get() {
    // 方式1：断言wallet.value一定存在
    return wallet.value!.name;
    // 方式2：空场景返回默认值
    // return wallet.value?.name ?? WalletName.Default
  },
  set(newVal: WalletName) {}
})

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