如何在用 TypeScript (TSX) 编写的 React 应用程序中使用 Facebook Relay？

Question

我想在 React that uses Relay to communicate with a GraphQL server. Recently JSX support was introduced for TypeScript. But there is no typings declaration file (.d.ts) for Relay on DefinitelyTyped 中编写一个新的 Web 应用程序。如何使用 TypeScript 编写我的应用程序而无需先为 Relay 编写类型文件？

Answer 1

Typescript 不要求您对使用的所有库进行打字，强烈建议您使用它。无需输入即可使用 Relay：

import * as React from "react"
let Relay = require("react-relay")

interface HelloProps extends React.Props<HelloComponent> {
  viewer: {
    message: string
  }
}

class HelloComponent extends React.Component<HelloProps,void> {
  render() {
    return <div>Hello { this.props.viewer.message }</div>
  }
}

let Hello = Relay.createContainer(HelloComponent, {
  fragments: {
    viewer: () => Relay.QL`fragment on Viewer { message }`
  }
})

然后将Hello用作常规的中继组件。这个想法是 require 是一个接受字符串和 returns any 的函数，因此您可以像在香草 Javascript 中那样使用 Relay 变量。

如果您不使用 Node.JS 打字，您可能需要为 require 添加打字。在 d.ts 文件的某处，添加：

interface NodeRequireFunction {
  (id: string): any;
}

declare var require: NodeRequireFunction;

如何在用 TypeScript (TSX) 编写的 React 应用程序中使用 Facebook Relay？

How to use Facebook Relay in a React app written in TypeScript (TSX)?

reactjs

typescript

react-jsx

relayjs

tsd