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

Posted 2023-03-08

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

【英文标题】：How to use Facebook Relay in a React app written in TypeScript (TSX)?

【发布时间】：2016-03-12 11:15:00

【问题描述】：

我想在React 中编写一个新的Web 应用程序，它使用Relay 与GraphQL 服务器通信。最近为TypeScript介绍了JSX support。但是DefinitelyTyped 上的 Relay 没有类型声明文件 (.d.ts)。如何在 TypeScript 中编写我的应用程序，而不必先为 Relay 编写类型文件？

【参考方案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 是一个接受字符串并返回 any 的函数，因此您可以像在普通 javascript 中一样使用 Relay 变量。

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

interface NodeRequireFunction 
  (id: string): any;


declare var require: NodeRequireFunction;

【讨论】：

感谢您指出我需要使用 Node.js 类型。但现在我收到以下错误：“错误 TS2503：找不到命名空间 'Relay'”。

interface HelloProps extends Relay.Props<HelloComponent> 应该是interface HelloProps extends React.Props<HelloComponent>

当我尝试使用class MyRoute extends Relay.Route /* ... */ 定义路由时，TSC 输出error TS2507: Type 'any' is not a constructor function type.。您将如何解决该错误？

@Korneel，这是您需要添加 一些 类型或避免使用 ES6 类的地方。自定义路由不需要是类实例，因此另一种选择是使用普通对象，如这里的第一个示例所示：facebook.github.io/relay/docs/…

非常感谢！真的:) 我必须将var DefaultNetworkLayer; 添加到您提供的类型中，以便能够设置默认网络层。我肯定需要对编写自定义类型文件进行一些研究。