javascript - FlowType - 复杂对象的重复声明

Question

请原谅新手问题，我正在努力理解/将 flowType 集成到我的 React/Redux 项目中。

我的问题是，当我们声明包含已声明(其他地方)属性的属性时，我们是否必须重复自己(声明类型)？

为了详细说明，我有高阶函数，它们通过 props 进行过滤，以便使用相关参数调用相关的 action-creator 函数。这是一个 HO 函数，它接受 4 个对象作为参数。

只关注第一个:envProps。其代码如下:

type envProps = {
    eCCurSelectedEle : string,
    renderTab : string,
    target : {
        pos : string,
        // collection is an object containing dynamically
        // inserted template objects with sub-objects. How would
        // I handle this? Do I have to break-down each object
        // property in this 'collection' & declare its inner
        // prop types and so on?
        collection : Object
    },
    targetPos : {
        h : number,
        w : number,
        pageX : number,
        pageY : number
    },
    toolbarCtrl : string
};

// just focusing on the first prop: envProps
export const svgMouseDownHandler = ( envProps : envProps,
                                                svgProps,
                                                target,
                                                prevSelectedTarget ) => {
...

我是否必须在每个参数中声明每个属性类型，即使该属性已在其他地方声明？ 我将如何处理动态对象？

谢谢

Answer 1

你可以像这样拆分出每种类型，然后你可以根据需要单独使用它。

type Target = {                                                                  
  pos: string,                                                                   
  // collection is an object containing dynamically                              
  // inserted template objects with sub-objects. How would                       
  // I handle this? Do I have to break-down each object                          
  // property in this 'collection' & declare its inner                           
  // prop types and so on?                                                       
  collection: Object                                                             
};                                                                               

type TargetPos = {                                                               
  h: number,                                                                     
  w: number,                                                                     
  pagex: number,                                                                 
  pageY: number                                                                  
};                                                                               

type envProps = {                                                                
  eCCurSelectedEle: string,                                                      
  renderTab: string,                                                             
  target: Target,                                                                
  targetPos: TargetPos,                                                          
  toolbarCtrl: string                                                            
};

对于动态对象，Flow可以理解一些动态模式，但你所要求的范围非常广泛。我认为最好用一个具体的例子来发布一个单独的问题。