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

Question

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

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

然后我添加了vue-apollo修改我的 main.ts 文件的插件来添加

apolloProvider: createProvider(),

在 vue 实例创建中。

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

'{ router: VueRouter; 类型的参数 商店：商店<{}>；apolloProvider: { 提供: () => {}; }; 渲染：（h：CreateElement）=> VNode；}' 不能分配给类型为 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>' 的参数。

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

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

我也得到以下

[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方法PARAM apolloClient，在所生成的vue-apollo.ts开始抱怨他们被隐式地any键入太。

Answer 1

您的方向是正确的，请更改vue-apollo.js为.ts

然后将“vue-cli-plugin-apollo”添加到“tsconfig.json”中的类型中。