wsfe / vue-tree

使用虚拟列表优化的 Vue 树组件 Vue tree component optimized using virtual list
https://wsfe.github.io/vue-tree/
MIT License
176 stars 32 forks source link

使用 TS 的时候提示找不到定义 #66

Closed xtuer closed 1 year ago

xtuer commented 1 year ago

问题描述 使用 TS 的时候提示找不到定义,目前是在 shims.t.ds 中增加 declare module '@wsfe/vue-tree' 给忽略了。

Could not find a declaration file for module '@wsfe/vue-tree'. '/Users/biao/Documents/workspace/newdt/dsc-research/dsc-vue/node_modules/@wsfe/vue-tree/dist/v3/vue-tree.mjs' implicitly has an 'any' type.
  There are types at '/Users/biao/Documents/workspace/newdt/dsc-research/dsc-vue/node_modules/@wsfe/vue-tree/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@wsfe/vue-tree' library may need to update its package.json or typings.

组件版本 Vue3 @wsfe/vue-tree

可能的解决办法: 来自 ChatGPT

The error message you are seeing indicates that the module @wsfe/vue-tree does not have a declaration file (.d.ts) that specifies its types. As a result, TypeScript is unable to infer the types for the module, and it falls back to using the 'any' type by default.

To resolve this issue, you have a few possible options:

  1. Install Type Declarations: Check if there are any available type declarations for the @wsfe/vue-tree package. You can search for them on DefinitelyTyped (https://definitelytyped.org/) or other community-driven TypeScript type declaration repositories. If you find the appropriate type declaration file, you can install it using npm or yarn:

    npm install @types/wsfe__vue-tree --save-dev

    or

    yarn add @types/wsfe__vue-tree --dev
  2. Check for Updates: Ensure that you are using the latest version of the @wsfe/vue-tree package. Sometimes, package updates include improvements to their TypeScript type declarations.

  3. Contact the Package Maintainer: If the package still lacks TypeScript type declarations despite being up to date, you can reach out to the maintainers of the @wsfe/vue-tree package and ask them to include TypeScript type declarations in their package.

  4. Use TypeScript's any Type: If you are unable to find type declarations for the package and the maintainers have not provided them, you can use TypeScript's any type for the objects and variables related to the @wsfe/vue-tree module. However, this approach means that you won't be able to leverage TypeScript's static type checking for that specific module.

It's worth noting that option 1 (installing type declarations) is the most appropriate solution as it enables you to use TypeScript's type checking effectively and ensures better type safety in your codebase. However, if the type declarations are not available, you might have to resort to option 4 and use the any type, though this could result in potential issues due to the lack of type safety.

ChuChencheng commented 1 year ago

检查一下你的 tsconfig.json 配置呢,尽量给一个最小可复现示例

xtuer commented 1 year ago
{
    "files": [],
    "references": [
        {
            "path": "./tsconfig.node.json"
        },
        {
            "path": "./tsconfig.app.json"
        }
    ],
    "compilerOptions": {
        "noImplicitAny": false,
        "noImplicitThis": true,
        "allowJs": true,
        "target": "es6"
    }
}
ChuChencheng commented 1 year ago

"moduleResolution": "Node" 试试?有用 vite 么

ChuChencheng commented 1 year ago

https://github.com/xtuer/template-app/tree/master/template-vue3-pc 是这个项目吗,有空我跑看看

xtuer commented 1 year ago

"moduleResolution": "Node" 试试?有用 vite 么

试了一下没有效果。

https://github.com/xtuer/template-app/tree/master/template-vue3-pc 是这个项目吗,有空我跑看看

这个模板项目里也使用了 vue-tree,您可以试试看。

ChuChencheng commented 1 year ago

看起来是你搞错了 references 字段的用法,没看出来为什么要引用两个 tsconfig 。在 VSCode 里面把这个字段注释了就没报错了。

用法可以参考 https://stackoverflow.com/questions/51631786/how-to-use-project-references-in-typescript-3-0

xtuer commented 1 year ago

看起来是你搞错了 references 字段的用法,没看出来为什么要引用两个 tsconfig 。在 VSCode 里面把这个字段注释了就没报错了。

用法可以参考 https://stackoverflow.com/questions/51631786/how-to-use-project-references-in-typescript-3-0

tsconfig 是脚手架生成的,我没有改这个文件,去掉 references 后也会报错。

ChuChencheng commented 1 year ago

不知道你用的什么脚手架,信息不足,你多检查一下吧,我这边去掉 references 之后没报错了

xtuer commented 1 year ago

使用的是 vue3 官方的脚手架 npm init vue@latest 生成的: https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

下面是 sql-formatter https://github.com/sql-formatter-org/sql-formatter 的 package.json 的导出部分,可以参考一下。

  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./lib/src/index.d.ts",
      "import": "./lib/index.js",
      "require": "./dist/sql-formatter.min.cjs"
    }
  },
xtuer commented 1 year ago

不知道你用的什么脚手架,信息不足,你多检查一下吧,我这边去掉 references 之后没报错了

知道你的为啥不报错了,因为我在 src/shims.d.ts 里使用declare module '@wsfe/vue-tree' 给排除了,所以不报错。排除后 import vue-tree 里的类型都是 any 类型了。