React Relay (реагировать на ретрансляцию) с броском Typescript TypeError: Прототипом Object может быть только Object или null: undefined

Question

Я сталкиваюсь с действительно странной ошибкой TypeError с react-relay при попытке создать экземпляр класса, который расширяет Relay.Mutation, Я создал простой проект Typescript с create-react-app my-app --scripts-version=react-scripts-ts продемонстрировать проблему.

Всякий раз, когда я бегу yarn startвот что я вижу:

Эта ошибка на самом деле не имеет смысла для меня:TypeError: Object prototype may only be an Object or null: undefined

Я просто пытаюсь создать новый экземпляр моего собственного расширенного Relay.Mutation учебный класс. Я действительно новичок в мире React Relay и ES6/Typescript в целом, так что, скорее всего, что-то глупо, что я просто скучаю.

В этом простом проекте я использую пример класса напрямую, как это определено в репозитории DefiniteTyped.

Разве я не смогу использовать этот класс так:

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 Реагирующий компонент:

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"
  }
}

Вот проект для GitHub

Обновление: в настоящее время наборы не действительны для response-relay > 1.x. Пожалуйста, смотрите ветку на github для этой проблемы. Я также обновил свое репо с помощью обходного пути.

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 и сделать declare module "react-relay" отметить это как any type (вы потеряете безопасность типов и поддержку IDE, но если вводить неправильно, это все равно не имеет значения).

Для последнего варианта сделайте это:

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

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