Skip to Content
学习教程高级使用TypeScript

与 TypeScript 一起使用

¥Usage with TypeScript

React Flow 是用 TypeScript 编写的，因为我们重视它提供的额外安全屏障。我们导出正确输入传递给 React Flow 组件的数据结构和函数所需的所有类型。我们还提供了一种扩展节点和边类型的方法。

¥React Flow is written in TypeScript because we value the additional safety barrier it provides. We export all the types you need for correctly typing data structures and functions you pass to the React Flow component. We also provide a way to extend the types of nodes and edges.

基本用法

¥Basic usage

让我们从最基本的类型开始，作为一个简单的起点。Typescript 可能已经推断出其中一些类型，但我们仍将明确定义它们。

¥Let’s start with the most basic types you need for a simple starting point. Typescript might already infer some of these types, but we will define them explicitly nonetheless.

import { useState, useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  applyNodeChanges,
  applyEdgeChanges,
  type Node,
  type Edge,
  type FitViewOptions,
  type OnConnect,
  type OnNodesChange,
  type OnEdgesChange,
  type OnNodeDrag,
  type NodeTypes,
  type DefaultEdgeOptions,
} from '@xyflow/react';
 
const initialNodes: Node[] = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 5, y: 5 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 5, y: 100 } },
];
 
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 
const fitViewOptions: FitViewOptions = {
  padding: 0.2,
};
 
const defaultEdgeOptions: DefaultEdgeOptions = {
  animated: true,
};
 
const onNodeDrag: OnNodeDrag = (_, node) => {
  console.log('drag event', node.data);
};
 
function Flow() {
  const [nodes, setNodes] = useState<Node[]>(initialNodes);
  const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
  const onNodesChange: OnNodesChange = useCallback(
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
  const onEdgesChange: OnEdgesChange = useCallback(
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
  const onConnect: OnConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      edgeTypes={edgeTypes}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      onNodeDrag={onNodeDrag}
      fitView
      fitViewOptions={fitViewOptions}
      defaultEdgeOptions={defaultEdgeOptions}
    />
  );
}

自定义节点

¥Custom nodes

使用 自定义节点 时，你可以将自定义 Node 类型（或 Node 联合）传递给 NodeProps 类型。使用自定义节点基本上有两种方法：

¥When working with custom nodes you have the possibility to pass a custom Node type (or your Node union) to the NodeProps type. There are basically two ways to work with custom nodes:

  1. 如果你有多个自定义节点，则需要将特定的 Node 类型作为通用类型传递给 NodeProps 类型：

    ¥If you have multiple custom nodes, you want to pass a specific Node type as a generic to the NodeProps type:

NumberNode.tsx
import type { Node, NodeProps } from '@xyflow/react';
 
type NumberNode = Node<{ number: number }, 'number'>;
 
export default function NumberNode({ data }: NodeProps<NumberNode>) {
  return <div>A special number: {data.number}</div>;
}

⚠️ 如果你单独指定节点数据，则需要使用 type（interface 在此处不起作用）：

¥⚠️ If you specify the node data separately, you need to use type (an interface would not work here):

type NumberNodeData = { number: number };
type NumberNode = Node<NumberNodeData, 'number'>;

  1. 如果你有一个根据节点类型渲染不同内容的自定义节点，则需要将 Node 联合类型作为通用类型传递给 NodeProps：

    ¥If you have one custom node that renders different content based on the node type, you want to pass your Node union type as a generic to NodeProps:

CustomNode.tsx
import type { Node, NodeProps } from '@xyflow/react';
 
type NumberNode = Node<{ number: number }, 'number'>;
type TextNode = Node<{ text: string }, 'text'>;
 
type AppNode = NumberNode | TextNode;
 
export default function CustomNode({ data }: NodeProps<AppNode>) {
  if (data.type === 'number') {
    return <div>A special number: {data.number}</div>;
  }
 
  return <div>A special text: {data.text}</div>;
}

自定义边

¥Custom edges

对于 自定义边缘，你具有与自定义节点相同的可能性。

¥For custom edges you have the same possibility as for custom nodes.

CustomEdge.tsx
import { getStraightPath, BaseEdge, type EdgeProps, type Edge } from '@xyflow/react';
 
type CustomEdge = Edge<{ value: number }, 'custom'>;
 
export default function CustomEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
}: EdgeProps<CustomEdge>) {
  const [edgePath] = getStraightPath({ sourceX, sourceY, targetX, targetY });
 
  return <BaseEdge id={id} path={edgePath} />;
}

高级用法

¥Advanced usage

使用 React Flow 创建复杂应用时，你将拥有许多自定义节点和边，每个节点和边都附加了不同类型的数据。当我们通过内置函数和钩子操作这些节点和边时，我们必须确保 缩小范围  节点和边的类型以防止运行时错误。

¥When creating complex applications with React Flow, you will have a number of custom nodes & edges, each with different kinds of data attached to them. When we operate on these nodes & edges through built in functions and hooks, we have to make sure that we narrow down  the types of nodes & edges to prevent runtime errors.

Node 和 Edge 类型联合

¥Node and Edge type unions

你将看到许多函数、回调和钩子（甚至是 ReactFlow 组件本身）都需要 NodeType 或 EdgeType 泛型。这些泛型只是应用中所有不同类型的节点和边的 unions 。只要你正确输入了数据对象（请参阅上一节），就可以使用它们的导出类型。

¥You will see many functions, callbacks and hooks (even the ReactFlow component itself) that expect a NodeType or EdgeType generic. These generics are simply unions  of all the different types of nodes & edges you have in your application. As long as you have typed the data objects correctly (see previous section), you can use their exported type.

如果你使用任何内置节点（‘input’、‘output’、‘default’）或边（‘straight’、‘step’、‘smoothstep’、‘bezier’），则可以将从 @xyflow/react 导出的 BuiltInNode 和 BuiltInEdge 类型添加到你的联合类型。

¥If you use any of the built-in nodes (‘input’, ‘output’, ‘default’) or edges (‘straight’, ‘step’, ‘smoothstep’, ‘bezier’), you can add the BuiltInNode and BuiltInEdge types exported from @xyflow/react to your union type.

import type { BuiltInNode, BuiltInEdge } from '@xyflow/react';
 
// Custom nodes
import NumberNode from './NumberNode';
import TextNode from './TextNode';
 
// Custom edge
import EditableEdge from './EditableEdge';
 
export type CustomNodeType = BuiltInNode | NumberNode | TextNode;
export type CustomEdgeType = BuiltInEdge | EditableEdge;

传递给 <ReactFlow /> 的功能

¥Functions passed to <ReactFlow />

要接收回调函数的正确类型，你可以将联合类型传递给 ReactFlow 组件。通过这样做，你必须明确输入回调函数。

¥To receive correct types for callback functions, you can pass your union types to the ReactFlow component. By doing that you will have to type your callback functions explicitly.

import { type OnNodeDrag } from '@xyflow/react';
 
// ...
 
// Pass your union type here ...
const onNodeDrag: OnNodeDrag<CustomNodeType> = useCallback((_, node) => {
  if (node.type === 'number') {
    // From here on, Typescript knows that node.data
    // is of type { num: number }
    console.log('drag event', node.data.number);
  }
}, []);
 
const onNodesChange: OnNodesChange<CustomNodeType> = useCallback(
  (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
  [setNodes],
);

钩子

¥Hooks

类型联合还可用于键入许多钩子的返回值。

¥The type unions can also be used to type the return values of many hooks.

FlowComponent.tsx
import { useReactFlow, useNodeConnections, useNodesData, useStore } from '@xyflow/react';
 
export default function FlowComponent() {
  // returned nodes and edges are correctly typed now
  const { getNodes, getEdges } = useReactFlow<CustomNodeType, CustomEdgeType>();
 
  // You can type useStore by typing the selector function
  const nodes = useStore((s: ReactFlowState<CustomNodeType>) => ({
    nodes: s.nodes,
  }));
 
  const connections = useNodeConnections({
    handleType: 'target',
  });
 
  const nodesData = useNodesData<CustomNodeType>(connections?.[0].source);
 
  nodeData.forEach(({ type, data }) => {
    if (type === 'number') {
      // This is type safe because we have narrowed down the type
      console.log(data.number);
    }
  });
  // ...
}

类型保护

¥Type guards

有多种方法可以在 Typescript 中定义 类型保护 。一种方法是定义类型保护函数，如 isNumberNode 或 isTextNode，从节点列表中过滤出特定节点。

¥There are multiple ways you can define type guards  in Typescript. One way is to define type guard functions like isNumberNode or isTextNode to filter out specific nodes from a list of nodes.

function isNumberNode(node: CustomNodeType): node is NumberNode {
  return node.type === 'number';
}
 
// numberNodes is of type NumberNode[]
const numberNodes = nodes.filter(isNumberNode);
Last updated on
测试不受控制的流程