javascript - React Relay (react-relay) 与 Typescript 抛出 TypeError : Object prototype may only be an Object or null: undefined

Question

当我尝试实例化一个扩展Relay.Mutation的类时，我遇到了一个非常奇怪的react-relay类型错误。我使用 create-react-app my-app --scripts-version=react-scripts-ts 创建了一个简单的 Typescript 项目来演示该问题。

每当我运行yarn start时，我都会看到以下内容:

这个错误对我来说并没有什么意义: 类型错误:对象原型(prototype)只能是一个对象或 null:未定义

我只是想实例化我自己的扩展 Relay.Mutation 类的新实例。总的来说，我对 React Relay 世界和 ES6/Typescript 还很陌生，所以我可能错过了一些愚蠢的东西。

在这个简单的项目中，我直接使用 DefinitelyTyped repository 中定义的示例类。 .

我不应该能够像这样使用这个类吗:

const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' });

这是 AddTweetMutation.tsx 类的样子:

import * as Relay from 'react-relay';

interface Props {
  text: string;
  userId: string;
}

interface State {
}

export default class AddTweetMutation extends Relay.Mutation<Props, State> {

  public getMutation() {
    return Relay.QL`mutation{addTweet}`;
  }

  public getFatQuery() {
    return Relay.QL`
            fragment on AddTweetPayload {
                tweetEdge
                user
            }
        `;
  }

  public getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'user',
      parentID: this.props.userId,
      connectionName: 'tweets',
      edgeName: 'tweetEdge',
      rangeBehaviors: {
        '': 'append',
      },
    }];
  }

  public getVariables() {
    return this.props;
  }
}

这是整个 Hello.tsx React 组件:

import * as React from 'react';
import AddTweetMutation from '../mutations/AddTweetMutation';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

class Hello extends React.Component<Props, {}> {
  render() {

    const atm = new AddTweetMutation({ text: 'asdf', userId: '1123' });
    console.log(atm);

    const { name, enthusiasmLevel = 1 } = this.props;

    if (enthusiasmLevel <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }

    return (
      <div className="hello">
        <div className="greeting">
          Hello {name + getExclamationMarks(enthusiasmLevel)}
        </div>
      </div>
    );
  }
}

export default Hello;

// helpers

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

这就是我的 package.json 的样子:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^20.0.6",
    "@types/node": "^8.0.19",
    "@types/react": "^16.0.0",
    "@types/react-dom": "^15.5.2",
    "@types/react-relay": "^0.9.13",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-relay": "^1.1.0",
    "react-scripts-ts": "2.5.0"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }
}

Here's the project to github

更新:输入目前对于 React-relay > 1.x 无效。请参阅thread on github for this issue 。我还用解决方法更新了我的存储库。

Answer 1

问题在于 react-relay@1.1.0 已更改其 API，并且 @types/react-relay@0.9.13 已过时。

TypeScript 根据可用的类型(类型定义)静态分析您的代码。因此，即使您的 @types/react-relay@0.9.13 已经过时，TypeScript 也不知道，只是根据它采取行动。

要解决此问题，您可以:

• 为 @types/react-relay 做出贡献，地址:https://github.com/DefinitelyTyped/DefinitelyTyped更新其类型
• 文件问题位于 https://github.com/DefinitelyTyped/DefinitelyTyped看看是否有人可以帮助更新打字。
• 使用“模块增强”在本地自行更新类型 ( https://www.typescriptlang.org/docs/handbook/declaration-merging.html )
• 不使用@types/react-relay并执行声明模块“react-relay”将其标记为any类型(您将失去类型安全和 IDE 支持，但如果类型不正确，也没关系)。

对于最后一个选项，请执行以下操作:

// custom-typings/react-relay.d.ts
declare module 'react-relay'

// tsconfig.json
{
  "include": [
    "custom-typings"
  ]
}