在 TypeScript 中使用 createSelector 創建選擇器工廠

Question

像這樣創建選擇器：

 import { createSelector } from 'reselect'; export interface Node { nodeId: number nodeName: string } export type NodeState = { nodes: Node[]; text: string; }; const nodeListState = (state) => state.nodeList; const byKey = (key: keyof NodeState) => createSelector( nodeListState, (nodeList: NodeState) => nodeList[key], ); export const getNodes = byKey('nodes'); export const getText = byKey('text');

在其他地方，使用選擇器：

 import { useSelector } from 'react-redux'; const nodes = useSelector(selectors.getNodes); nodes.map(...)

這會導致錯誤：

Property 'map' does not exist on type 'string | Node[]'.
  Property 'map' does not exist on type 'string'.  TS2339

變量節點實際上是一個數組。 我對這一切都錯了嗎？ 設置在TS中通過鍵創建選擇器的function的正確方法是什么？

Answer 1

這里發生的是 typescript 無法區分byKey('nodes')和byKey('text') 。 它們都返回相同的類型，即選擇文本string或節點Node[]的選擇器。 因此const nodes = useSelector(selectors.getNodes)返回聯合string | Node[] string | Node[]並且您收到一個錯誤，即string不是數組。

解決此問題的一種方法是byKey並分別創建兩個選擇器。

但是我們可以通過將byKey通用 function 來使其正常工作，這取決於調用它的特定鍵。 這樣我們就知道byKey('nodes')選擇了'nodes'屬性。

如果你對nodeListState應用正確的類型，你實際上不需要將第二個選擇器的參數指定為nodeList: NodeState因為它可以根據第一個選擇器的返回類型來推斷。

const nodeListState = (state: {nodeList: NodeState}) => state.nodeList;

const byKey = <K extends keyof NodeState>(key: K) => createSelector(
  nodeListState, 
  (nodeList) => nodeList[key],
);

現在getNodes選擇Node[]並且getText選擇string 。