[Vue] 备忘录

[NHZEX]

No description provided.

[NHZEX]

状况

错误1

定义const a = ref<T[]>([])，使用a.value.find(...)取出的值传递到函数function x(val: T)时会报告类似下方的错误内容：

 Two different types with this name exist, but they are unrelated.
        Types of property '...' are incompatible.
          Type '...' is not assignable to type 'Readonly<Ref<...>>'.

尝试可用的方法:

1. const a = ref<T[]>([]) as Ref<T[]>，这样定义不需要修改接受传入值的地方。
2. function x(val: UnwrapRef<T>)，这样定义传入值时不在报错。

错误2

定义

const model = ref<T>(...)
const v1= computed<T>({
  get: () => model.value.xxx,
  set: value => {
    model.value.xxx= value;
  }
});

报告类似下方的错误内容：

# ERR-1
Vue: No overload matches this call.
Overload 1 of 2,
(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>
, gave the following error.
Overload 2 of 2,
(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>
, gave the following error.

# ERR-1
Vue: Parameter value implicitly has an any type.

尝试可用的方法:

const v1= computed<T>({
  get: () => model.value.xxx as T,
  set: value => {
    model.value.xxx = value as UnwrapRef<T>;
  }
});

可能相关资料

• typescript - vue UnwrapRefSimple generics type can't assignable to T at reactive - Stack Overflow
• Types don't allow refs to be assigned to reactive object properties · Issue #3478 · vuejs/core
• Set wrapped with Ref Ractive, there will be type problems with the has add ... method. · Issue #9755 · vuejs/core
• javascript - Vue 3 - Forced to use any type with computedRef - Stack Overflow
• typescript - How can I define a model in a Vue 3 component that has a type of array or string? - Stack Overflow
• vue.js - 因为 vue 的 reactive 对象会自动对 ref 对象进行解包，所以导致了 ts 报错，有什么解决方法吗？ - SegmentFault 思否
• Type 'T' is not assignable to type 'UnwrapRef' · vuejs/pinia · Discussion #1512

遇到类似问题

• 使用ref包裹Map后，使用get取出值时遇到的类型错误也可能是这个。