vue composition api toRefs typescript

为道具创建参考时如何获得正确的类型?我试过这样

setup(props) {
    const { userId } = toRefs(props); // userId is string
    retrun {
        ...getComposition(userId);
    };
}

...
function getComposition(userId) {
    // How to make sure that userId.value is string?)
    const caps = userId.value.toUperCase(); // here how to get string method hints
}
stack overflow vue composition api toRefs typescript
原文答案

答案:

作者头像

https://v3.vuejs.org/guide/typescript-support.html#using-with-composition-api

Refs 从初始值推断类型:

但我认为 IDE 可能会像我们一样感到困惑。无论如何,这在 webstorm 中对我有用......

  setup (props) {
    const { userId } = toRefs(props); // userId is string
    function getComposition(idRef) {
      return {caps: (idRef.value as string).toUpperCase()};
    }
    return {
      ...getComposition(userId)
    };
  }

vue devtools

作者头像

就个人而言,我认为你不应该将 toRefs() 用于道具,因为 toRefs 结果是一个可写的 ref 对象,但 props 不应该被改变。所以我认为最好将 props.userId 传递给 getComposition 函数,然后 vscode 可以轻松识别此道具的类型。