如何在使用 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>”类型的参数。

对象字面量只能指定已知属性，'apolloProvider' 不存在于类型 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>' 中。 [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 方法参数apolloClient，在生成的vue-apollo.ts 开始抱怨它们也是隐含的any 类型。

Answer 1

你走对了，把vue-apollo.js改成.ts

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