Typescript 5 环境下, 从 @wangeditor/editor-for-vue 包中导入组件, ts 报错

[pomeluce]

问题描述

• 产生原因 当前正在使用 TypeScript 5.0.3 的版本, 并在 tsconfig.json 中使用了 "moduleResolution": "bundler", 在对组件进行导入时 ts 报错,

  貌似需要对类型定义添加到库的 package.json 的导出字段

• 导入代码 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

• 错误信息 Could not find a declaration file for module '@wangeditor/editor-for-vue'. '@[email protected]_@[email protected][email protected]/node_modules/@wangeditor/editor-for-vue/dist/index.esm.js' implicitly has an 'any' type. There are types at '@wangeditor/editor-for-vue/dist/src/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@wangeditor/editor-for-vue' library may need to update its package.json or typings. (ts 7016)

wangEditor 版本

"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12",

是否查阅了文档 ？

是

最小成本的复现步骤

• 步骤一 将项目或本地 TypeScript 环境升级到 5.0.3
• 步骤二 在 tsconfig.json 中设置 "moduleResolution": "bundler"
• 步骤三 在 vue 文件中 导入组件 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

[wiilsliang]

解决了吗

[pomeluce]

解决了吗

没有, ts 检查还是会爆红, 但是不影响项目运行, 就是强迫症看着很难受

[sakura-yinfeichen]

解决了 在 node_modules@wangeditor\editor-for-vue\package.json 中 的 exports 配置下增加一条 "types": "./dist/src/index.d.ts"

{
  "exports": {
    ".": {
     +  "types": "./dist/src/index.d.ts",
        "import": "./dist/index.esm.js",
        "require": "./dist/index.js"
    }
  },
}

[limbodan]

解决了 在 node_modules@wangeditor\editor-for-vue\package.json 中 的 exports 配置下增加一条 "types": "./dist/src/index.d.ts"

{
  "exports": {
    ".": {
     +  "types": "./dist/src/index.d.ts",
        "import": "./dist/index.esm.js",
        "require": "./dist/index.js"
    }
  },
}

牛皮，可以的