Typescript 使用 Apollo Client for Angular 2 失败

Posted 2023-03-10

【中文标题】Typescript 使用 Apollo Client for Angular 2 失败

【英文标题】：Typescript fail with Apollo Client for Angular 2

【发布时间】：2018-01-20 20:46:18

【问题描述】：

我正在尝试将 Apollo Client 添加到我的 Ionic Angular 2 应用程序中。我遵循了官方文档。

我安装了软件包

npm install apollo-client apollo-angular graphql-tag --save

我添加了 Apollo Client 实例

// src/apollo/client.ts
import  ApolloClient, createNetworkInterface  from 'apollo-client'

export const Client = new ApolloClient(
  networkInterface: createNetworkInterface(
    uri: 'http://localhost:4000/graphiql-tool',
    // opts: 
    //   credentials: 'same-origin',
    // ,
  )
)

//app.module.ts
import  ApolloModule  from 'apollo-angular'
import  Client  from '../apollo/client'

@NgModule(
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ApolloModule.forRoot(() => Client)
  ]
  // ...
)
export class AppModule 

我尝试运行应用程序，但 Typescript 编译失败

> ionic-app-scripts serve

[08:25:11]  ionic-app-scripts 1.3.7
[08:25:11]  watch started ...
[08:25:11]  build dev started ...
[08:25:11]  clean started ...
[08:25:11]  clean finished in 23 ms
[08:25:11]  copy started ...
[08:25:11]  transpile started ...
[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 17
            ',' expected.

      L16:  ;
      L17:  export declare type ApolloExecutionResult<T = 
      L18:      [key: string]: any;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 17
            '>' expected.

      L16:  ;
      L17:  export declare type ApolloExecutionResult<T = 
      L18:      [key: string]: any;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 19
            ';' expected.

      L18:      [key: string]: any;
      L19:  > = 
      L20:      data?: T;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 19
            Expression expected.

      L18:      [key: string]: any;
      L19:  > = 
      L20:      data?: T;

[08:25:15]  typescript: node_modules/apollo-client/core/types.d.ts, line: 20
            Expression expected.

      L19:  > = 
      L20:      data?: T;
      L21:  ;

像这样的错误更多。我试图找到答案，但一切都与 Typescript 错误和 Apollo Client 有关，但我没有很好的结果。

依赖关系

"dependencies": 
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/core": "3.7.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic/storage": "2.0.1",
    "apollo-angular": "^0.13.0",
    "apollo-client": "^1.9.1",
    "graphql-tag": "^2.4.2",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.10"
  ,
  "devDependencies": 
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-ionic-angular": "1.1.2",
    "ionic": "3.6.0",
    "typescript": "2.2.1"
  ,

我的打字稿文件

  "compilerOptions": 
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  ,
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": 
    "rewriteTsconfig": false
  

【参考方案1】：

所有指向 Typescript 类型定义的东西都是错误的。其中一些可能会随着一些软件包更新而消失。

现在唯一缺少的是

[10:38:46]

 typescript: node_modules/@types/graphql/subscription/subscribe.d.ts, line: 17
            Cannot find name 'AsyncIterator'.

      L16:      subscribeFieldResolver?: GraphQLFieldResolver<any, any>
      L17:  ): AsyncIterator<ExecutionResult>;

[10:38:46]  typescript: node_modules/@types/graphql/subscription/subscribe.d.ts, line: 29
            Cannot find name 'AsyncIterable'.

      L28:      fieldResolver?: GraphQLFieldResolver<any, any>
      L29:  ): AsyncIterable<any>;

它被这个https://github.com/apollographql/graphql-subscriptions/issues/83关闭了