在 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'
  // pinia
  import { 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)
                    使用 get() set() 定义计算属性时，出现 '不能将类型“WritableComputedRef”分配给类型“string” ts(2322)' 或 "error TS2322: Type 'WritableComputedRef' is not assignable to type 'string'" 错误解决方法
该库在与ArrayBuffers之间对base64进行编码和解码
encode（buffer） -将ArrayBuffer编码为base64字符串
encode（str） -将base64字符串解码为ArrayBuffer
				
在我用react + typescript写项目的时候，ts总会报一些类型的错误，比如下图的错误：Type ‘string | string[]’ is not assignable to type ‘string | undefined’.
在我确定我的类型是正确的情况下不理解为啥报这样一个错，在网上找了很久，就是加类型断言，解决方法如下图：（值 as 类型）
这样就不会报错拉。
关于typescript类型断言，整理知识点如下：
typescript很强大，但是用不好时也会很头痛，开发遇到类型错误的
					
vue3（ts报错）：类型“string | undefined”的参数不能赋给类型“string”的参数。不能将类型“undefined”分配给类型“string”。ts(2345)
排查代码后发现, 只要将 .tsx 换成 .jsx 之后发现问题就不存在了。 于是将问题定位在了 TypeScript 上。
所以只需要将子组件接受的 props 和 state 的类型定位成 any 这个问题就可以解决。
				
目录Vue3中 ref 的类型推断问题 Vue3+TypeScript问题瞎分析直接看解决方案参考
Vue3中 ref 的类型推断问题 Vue3+TypeScript
Vue 3.0.0
typescript 4.2.3
今天学习Vue3 Composition API的过程中遇到一个问题,类的私有类型导致类型推断失败
Type ‘Ref<{}>’ is not assignable to type ‘Ref’
出问题的代码
class User {
  private id: 
 :warning: 请阅读：
该机器人仅通过您的10FF个人资料页面自动为WPM，成就（支持者，翻译者，完成者）和多语种角色提供权限。
如果您想提交视频以进行验证 :check_mark_button: 角色，请不要使用以下命令：在＃roles-request频道中发送带有10FF个人资料和指向视频的链接的消息。
如果您想拥有可自我分配的角色（Qwerty，10个手指，英语，...），请转到＃self-assignable-roles频道。
 :keyboard:
 已验证 :check_mark_button:
 已知的问题
错误，问题，建议
 !roles <your>
 !roles https://10fastfingers.com/user/209050/
该命令仅在＃auto-roles通道中有效。
 请耐心等待机器人。 单个请求最多可能需要10或20秒。 但是，如果这段时间之后没有任何
				
ts-simple-type
这是什么？
 目前，Typescript API的类型检查器未提供检查可分配性和构建类型的方法。 请参阅Typescript github存储库上的问题和 。
 为了填补在讨论此问题时的空白，该库旨在提供用于处理Typescript中的类型的最基本的辅助函数。
 此外，该库可以帮助您构造可以序列化和易于分析的类型（称为SimpleType ）。
 该库有35000多个测试，可将结果与实际的Typescript诊断进行比较（请参阅 ）。
npm install ts-simple-type
该API非常简单。 例如，如果你想检查是否打字稿类型typeB是分配给typeA ，您可以使用下面的函数。
 import { isAssignableToType } from "ts-simple-type" ;
const isAssignable = 
				
Assignable_values-维生素枚举
 assignable_values使您可以限制可以分配给ActiveRecord模型的属性或关联的值。 您可以将其视为枚举，在枚举中，将在运行时生成允许值列表，并在验证期间检查该值。
 我们通过一些细微调整精心增强了核心枚举功能，这些细微调整对于Web表单，国际化应用程序和通用授权模式很有用。
 在Ruby 1.8.7、2.1、2.3、2.4和2.5上，使用Rails 2.3、3.2、4.2、5.1和6.0（测试版）对assignable_values进行了测试。
限制标量属性
限制可分配给字符串，整数等的值的基本用法是：
 class Song < ActiveRecord::Base
  assignable_values_for :genre do
    ['pop', 'rock', 'electronic']
				
使用TypeScript，报错：TS2322: Type ‘“123”’ is not assignable to type ‘number’.
问题原因：定义的数值类型的数据，赋值是一个字符串。因此报错。
解决办法：将字符串修改为数值类型即可。
				
这个错误信息是 TypeScript 编译器在编译代码时给出的，它的意思是你在给一个类型为 `string | undefined` 的变量赋值时，使用了一个类型为 `string | null` 的值，而 TypeScript 认为这是不允许的，因为 `null` 不是 `undefined`。
解决这个问题的方法有两种：
1. 将变量的类型改为 `string | null | undefined`，这样就可以直接给变量赋值为 `null` 了。
2. 在给变量赋值时，使用 null 判断或者非空断言操作符（!）来明确告诉 TypeScript 这个值不可能为 null 或 undefined，比如：
   ```typescript
   const str: string | undefined = null;
   // 报错
   const str2: string | undefined = str;
   // 正确
   const str3: string | undefined = str || undefined;
   const str4: string | undefined = str!;
				Uncaught SyntaxError: XX ‘xx/.vite/vue.js?xx‘ does not provide an export named ‘InjectionKey‘ 解决方法
            Uncaught SyntaxError: XX ‘xx/.vite/vue.js?xx‘ does not provide an export named ‘InjectionKey‘ 解决方法
            TypeScript 错误 error TS2469、error TS2731 解决办法