TypeScript+pnpm 类型问题：如果没有引用 @vueuse/shared"，则无法命名 "useOTPInfosStore" 的推断类型？

  • Z时代
  • 2024-02-13
  • 分类：IT

在文件 /src/stores/otpInfos.ts 的第 7 行，TypeScript 报出以下错误（但是执行 pnpm dev 运行是没有任何问题的）：

如果没有引用 ".pnpm/@vueuse+shared@9.13.0_vue@3.3.4/node_modules/@vueuse/shared"，则无法命名 "useOTPInfosStore" 的推断类型。这很可能不可移植。需要类型注释。ts(2742)

请问这是什么意思？我需要怎么修改？

我的本地环境：

> node --version
v20.5.0
> pnpm --version 
8.6.12
>code --version
1.81.1
6c3e3dba23e8fadc360aed75ce363ba185c49794
x64

npm 包的版本：package.json

更新 1：

一个最小重现仓库：https://jihulab.com/zhoushengdao-sf/ts2742

回答：

看了下，这个应该是ts+pnpm的问题，可以看看如下issue

  • https://github.com/microsoft/TypeScript/issues/42873
  • https://github.com/microsoft/TypeScript/issues/47663

可以看看这个老哥的分析以及workaround

简单来说就是useStorage返回的类型是RemovableRef, 而RemovableRef这个类型是从@vueuse/shared这个库导入的，不在项目的依赖里面，ts编译的时候从node_modules找不到，就报错了，尝试如下解决方案：

// 手动引入RemovableRef这个类型就行了
import { defineStore } from "pinia";
- import { useStorage } from "@vueuse/core";
+ import { useStorage, type RemovableRef } from "@vueuse/core";
export const useTodoStore = defineStore("todos", () => {
  const todo = useStorage<string[]>("todo", []);
  return { todo };
});

或者不用pnpm了，看起来这个问题存在有一段时间了

回答：

vueuse 应该安装为 dependencies，包括 qrcode、qr-scanner、naive-ui这一些

以上是 TypeScript+pnpm 类型问题：如果没有引用 @vueuse/shared&quot;，则无法命名 &quot;useOTPInfosStore&quot; 的推断类型？ 的全部内容， 来源链接： utcz.com/p/934805.html

回到顶部