我尝试添加到项目中的任何第三方Vue.js库都会引发以下错误:
Could not find a declaration file for module 'vue-xxx'
我尝试了'vue-treeselect','vue-select','vue-multiselect'或多或少相同的结果(*这些库不允许import Modulename from
,但需要const Modulename = require
)。
我在"dependencies": {
中添加package.json
下的内容。
我正在使用由dotnet core提供的Vue.js的SPA模板。
'tree-select'的完整示例:
import Treeselect from 'vue-treeselect';
/* ... */
value = null;
source = [
{
id: 'node-1',
label: 'Node 1',
children: [
{
id: 'node-1-a',
label: 'Node 1-A',
}
]
},
{
id: 'node-2',
label: 'Node 2',
}
];
/* ... */
<treeselect v-model="value"
:multiple="true"
:options="source" />
错误:
in [at-loader] ./ClientApp/components/mycomponent/mycomponent.ts:10:24
TS7016: Could not find a declaration file for module 'vue-treeselect'. 'path/to/project/node_modules/vue-treeselect/dist/vue-treeselect.js' implicitly has an 'any' type.
package.json
{
"name": "MyProject",
"private": true,
"version": "0.0.0",
"dependencies": {
"dygraphs": "^2.1.0",
"ol3-layerswitcher": "^1.1.2",
"vue-treeselect": "^1.0.6"
},
"devDependencies": {
"@types/dygraphs": "^1.1.6",
"@types/webpack-env": "^1.13.0",
"@types/vue": "^2.0.0",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "^3.0.0",
"bootstrap": "^3.3.6",
"css-loader": "^0.25.0",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.1.1",
"style-loader": "^0.13.1",
"typescript": "^2.2.1",
"url-loader": "^0.5.7",
"vue": "^2.5.13",
"vue-loader": "^14.2.1",
"vue-property-decorator": "^6.0.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
答案 0 :(得分:3)
如果@types/vue-treeselect
不存在,那么您可以使用环境定义手动声明模块。
在项目的某处创建.d.ts
(警告:不应使用import
或export
)并定义您的模块。如果您不想对其进行类型检查(将导入的所有内容都视为any
):
declare module 'vue-treeselect'
如果要进行类型检查:
declare module 'vue-treeselect' {
export function something(): void
}
答案 1 :(得分:2)
因为任何给定的解决方案本身都没有帮助我,所以我不得不在我的项目根文件夹中创建一个专用的 vendor.d.ts
(shims-vue.d.ts
不起作用)文件,然后将以下行放在那里:
declare module 'my-module-name-here';
答案 2 :(得分:0)
事实证明问题是错误的,因为我想使用'@ riophae / vue-treeselect',但我的目标是'vue-treeselect'。
但这只是问题的一部分,将第三方npm组件导入Vue.js打字稿项目仍然不是微不足道的(至少对我而言)。
这就是我解决它的方法:
快速&amp;脏解决方案(当一个人不关心类型而只想导入库时)
<强>步骤:强>
更改tsconfig.json
(项目的Typescript配置)以允许import Treeselect from '@riophae/vue-treeselect';
:
"noImplicitAny": false
(如果没有此步骤,则会收到错误消息,指出:TS7016: Could not find a declaration file for module '@riophae/vue-treeselect'. 'path/to/project/node_modules/@riophae/vue-treeselect/dist/vue-treeselect.min.js' implicitly has an 'any' type.
)
导入模块并注册为'treeselect':
import Treeselect from '@riophae/vue-treeselect';
Vue.component('treeselect', Treeselect);
(如果没有此步骤,则会收到错误消息,指出:Unknown custom element: <treeselect> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
)
在视图中使用它:
<treeselect v-model="value" :multiple="true" :options="source" />
Rember将样式设置在.vue.html页面的底部:
<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>
如果你想正确地做事,我强烈推荐这篇文章:
“为第三方NPM模块编写声明文件”
答案 3 :(得分:0)
由于在JavaScript中生成了vue-xxxxxx
,因此发生了此错误。
方法1: 为避免该问题,我只用标准的 require():
const vue-xxxxxx = require('vue-xxxxxx');
// import { vue-xxxxxx } from 'vue-xxxxxx'
方法2:
为了避免出现此问题,我只需将这些行替换为tsconfig.json
"noImplicitAny": false,
"allowJs": true,
现在您可以使用import语句,如下所示:
从“ vue-xxxxxx”导入{vue-xxxxxx}
享受:)
答案 4 :(得分:0)
如果您使用的是 vue,让我们在 shims-vue.d.ts
文件中添加如下内容
declare module 'module-name-here' {
import { ModuleNameHere } from 'module-name-here'
export { ModuleNameHere }
}