如何在 Vue 3 中输入仅接受只读引用的函数？

Question

在 Vue 3 中，您可以通过简单地用readonly(myRef).

有没有办法强制在编译时仅使用只读引用调用函数？

例如，这应该是一个编译错误：

const name = ref('Susan');

function blah(someRef: Readonly<any>) {
  // ...
}

blah(name);

Answer 1

nogridbag 的评论是正确的。使用DeepReadonly类型：

import { readonly, ref } from 'vue'; // or from '@vue/composition-api'
import type { DeepReadonly } from 'vue'; // or from '@vue/composition-api'

const name = ref('Susan');
const readonlyName = readonly(name); // type: DeepReadonly<Ref<string>>

function blah(someRef: DeepReadonly<any>) {
  // ...
}

blah(name);
blah(readonlyName);