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

Question

我想在React中编写一个新的Web应用程序，它使用Relay与GraphQL服务器进行通信。 最近为TypeScript引入了JSX支持 。 但是在DefinitelyTyped上没有用于Relay的打包声明文件（.d.ts）。 如何在TypeScript中编写我的应用程序而不必先为Relay写一个打字文件？

Answer 1

Typescript不要求你为你使用的所有库都打字，强烈推荐。 要使用没有打字的接力：

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是一个接受字符串并返回any字符串的函数，因此您可以像在vanilla Javascript中那样使用Relay变量。

如果您没有使用Node.JS类型，则可能需要为require添加类型。 在d.ts文件的某处，添加：

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

declare var require: NodeRequireFunction;