Angular 2 的 Apollo Client 打字稿失败

Question

我正在尝试将 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
  }
}

Answer 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

Angular 2 的 Apollo Client 打字稿失败

Typescript fail with Apollo Client for Angular 2

javascript

angular

types

apollo

apollo-client