Question

td;dr 如何在已经使用TypeScript的项目中包含vue-apollo？

我使用vue cli @ 3和TS创建了一个新的vue项目。

然后，我添加了vue-apollo插件，该插件修改了main.ts文件以添加

apolloProvider: createProvider(),

在vue实例创建中

。

但是编译器对此有所抱怨。

类型'{路由器的参数：VueRouter;商店：商店<{}>； apolloProvider：{提供：（）=> {}; };渲染：（h：CreateElement）=> VNode; }”不能分配给“ ComponentOptions，DefaultMethods，DefaultComputed，PropsDefinition>，Record>”类型的参数。

对象文字只能指定已知属性，并且'apolloProvider'在'ComponentOptions，DefaultMethods，DefaultComputed，PropsDefinition>，Record>'类型中不存在。 [2345]

我可以看到我从npm获取的vue-apollo包中有一个类型目录，但不确定如何使用它们。

我还得到了以下内容

[ts]找不到模块'@ / vue-apollo'的声明文件。 “ /Users/praveen/code/voicezen/repos/voicezen-ui/src/vue-apollo.js”隐式具有“ any”类型。 [7016]

对于main.ts中的以下导入

import { createProvider } from '@/vue-apollo';

我知道这可能来自noImplicitAny规则，但随后将生成的 vue-apollo.js 更改为 vue-apollo.ts 也没有不能解决问题。

将其更改为.ts可以从main.ts中删除关于以上两个错误的编译器错误，但是随后得到以下内容。

找不到模块'vue-cli-plugin-apollo / graphql-client'的声明文件。 “ /Users/praveen/code/voicezen/repos/voicezen-ui/node_modules/vue-cli-plugin-apollo/graphql-client/index.js”隐式具有“ any”类型。

对于

import {
  createApolloClient,
  restartWebsockets
} from 'vue-cli-plugin-apollo/graphql-client';

要解决此问题，我可以在类型中添加一个模块声明，但这是正确的方法吗？

declare module 'vue-cli-plugin-apollo/graphql-client';

生成的onLogin中的onLogout或apolloClient方法参数vue-apollo.ts也开始抱怨它们也是隐式any类型。

Answer 1

您在正确的轨道上，将vue-apollo.js更改为.ts

然后将'vue-cli-plugin-apollo'添加到'tsconfig'中的类型。

如何在使用Vue CLI @ 3和TypeScript设置的项目中使用？

1 个答案: