前言

在 Vue3 + TypeScript + pinia 项目中，使用 get() set() 定义计算属性时，出现 '不能将类型“WritableComputedRef<string>”分配给类型“string” ts(2322)' 或 "error TS2322: Type 'WritableComputedRef<string>' is not assignable to type 'string'" 错误

src/components/xxxx.vue(xx,xx): error TS2322: Type 'WritableComputedRef<string>' is not assignable to type 'string'.

错误复现

1. xxxx.vue 部分

<template><input v-model="textvalue" type="text" />
</template><script setup lang="ts">import { computed } from 'vue'// piniaimport { useHelloworldStore } from '../stores/helloworldStore'const store = useHelloworldStore()// 报错：不能将类型“WritableComputedRef<string>”分配给类型“string” ts(2322)const textvalue: string = computed({get() {return store.textvalue},set(newValue: string) {return store.changeTextvalue(newValue)}})
</script>

2. helloworldStore.ts 部分

import { defineStore } from 'pinia'export const useHelloworldStore = defineStore('helloworldStore', {state: () => {return {textvalue: '',}},actions: {changeTextvalue(newVal: string) {setTimeout(() => {this.textvalue = newVal}, 300)},}
})

3. 错误原因

vue3 的 computed 函数返回的是一个 ref 类型的响应式对象，此处传入 string 类型的 get() 和 set() 后，computed 函数返回的是 WritableComputedRef<string> 类型的值，而非 string 类型

但本文在 textvalue 计算属性处声明的类型是 string，与返回类型 WritableComputedRef<string> 不符，所以会报错：不能将类型“WritableComputedRef<string>”分配给类型“string” ts(2322)

解决方案

方法一：删掉 textvalue 处的类型声明

利用 vue3 的 <script setup> 语法糖，vue3 会自动推断 textvalue 的类型为 WritableComputedRef<string> ，解决问题

  // 验证通过const textvalue = computed({get() {return store.textvalue},set(newValue: string) {return store.changeTextvalue(newValue)}})

或使用 export default difineComponent({...}) 与 setup() 函数，同样会自动推断类型

方法二：声明 textvalue 为 WritableComputedRef<type> 类

从 vue 中引入 WritableComputedRef 类，将 textvalue 类型声明为 WritableComputedRef<type>，解决问题，适用于需要声明计算属性类型的场景

  import { computed, type WritableComputedRef } from 'vue'// 验证通过const textvalue: WritableComputedRef<string> = computed({get() {return store.textvalue},set(newValue: string) {return store.changeTextvalue(newValue)}})

error TS2322: Type ‘WritableComputedRef＜string＞‘ is not assignable to type ‘string‘ 解决方法相关推荐

Type ‘HTMLElement | null‘ is not assignable to type ‘HTMLElement‘
在typescript3.9中,以下代码编译时会提示错误: const elem : HTMLElement = document.getElementById('someid'); // Type ...
Mysql添加用户错误:ERROR 1364 (HY000): Field ‘ssl_cipher‘ doesn‘t have a default value解决方法
Mysql添加用户错误:ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value解决方法参考文章: (1)Mysql添加 ...
Json string value cannot have line breaks（解决方法）
Json string value cannot have line breaks(解决方法) 参考文章: (1)Json string value cannot have line breaks(解 ...
ERROR: Could not find a version that satisfies the requirement XXX解决方法
出现问题:ERROR: Could not find a version that satisfies the requirement XXX解决方法找了很久终于找到能解决这种报错的方法了. 直接选 ...
Python pip install 安装包报错ERROR: Could not find a version that satisfies the requirement XXX解决方法
Python pip install 安装包报错ERROR: Could not find a version that satisfies the requirement XXX解决方法文章目录 ...
虚幻引擎UE4.25版本使用Android打包出错提示：ERROR: cmd.exe failed with args /c 和 :app:assembleDebug的解决方法
虚幻引擎 UE4.25版本使用Android打包出错提示:ERROR: cmd.exe failed with args /c 和 :app:assembleDebug的解决方法: 在虚幻引擎的jdk ...
Keil 5下出现Error: L6218E: Undefined symbol Delay(unsigned) (referred from main.o).的解决方法
问题背景: 今天在给stm32f407vgt6点灯时,想实现循环闪烁,于是想从以前的工程中移植一个delay延时函数,移植后编译时发现出现错误: Error: L6218E: Undefined sy ...
记一次SpringBoot操作redis报错 Error creating bean with name ‘dataSource‘ defined in class path resource解决方法
代码块以下为Springboot操作Redis一些简单的测试代码 maven依赖 <dependency><groupId>org.springframework.boot& ...
对于在git上面拉代码报“error: RPC failed； curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054“解决方法
对于在git上面拉代码报"error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054"解 ...
error 1044 (42000):access denied for user ''@'localhost' to database 'mysql' 解决方法
重新安装mariaDB数据库时,出现安装权限问题,中止安装发现居然能够登陆mysql,但是登陆时可以不填密码,操作数据库时会报错:ERROR 1044 (42000): Access denied f ...

error TS2322: Type ‘WritableComputedRef＜string＞‘ is not assignable to type ‘string‘ 解决方法

前言

错误复现

解决方案

方法一：删掉 textvalue 处的类型声明

方法二：声明 textvalue 为 WritableComputedRef<type> 类

error TS2322: Type ‘WritableComputedRef＜string＞‘ is not assignable to type ‘string‘ 解决方法相关推荐

最新文章

热门文章