2017-07-27 69 views
1
/* @flow */ 

type BaseProps = { 
    commonProp1: number, 
    commonProp2: string, 
} 

type Type1Props = BaseProps & { 
    type: 'type1', 
    extraProp1: boolean, 
} 

type Type2Props = BaseProps & { 
    type: 'type2', 
    extraProp2: number, 
} 

type Type = Type1Props | Type2Props; 

function dealWithType1({ props }: {props: Type1Props}) { 
    console.log('common prop 1', props.commonProp1); 
    console.log('type1 extra prop', props.extraProp1); 
} 
function dealWithType2({ props }: {props: Type2Props}) { 
    console.log('common prop 1', props.commonProp1); 
    console.log('type2 extra prop', props.extraProp2); 
} 

function branch({ props }: { props: Type }) { 
    const a = { 
    type1: dealWithType1, 
    type2: dealWithType2, 
    }[props.type]; 
    return a({props}); 
} 

above code調度功能表明分派任取決於屬性type其它兩個功能的功能(branch)。所有函數都接受一個對象,它具有在BaseProps中聲明的共同數量的屬性,而每個單獨的調度函數處理一些額外的屬性,這些屬性取決於type。這些擴展對象被聲明爲BaseProps加上額外的交集。泛型類型被聲明爲所有可能的對象類型的不相交聯合。與不同的簽名

這是我的問題的簡化版本,雖然它會產生相同的錯誤。在實際的情況下,所有的都是React無狀態組件,所以基本上是函數,除了它們的首字母大寫,並且被稱爲JSX組件:<A props={props} />。我正在展示上述簡化版本,它仍然報告與實際的JSX版本相同的錯誤。

我的猜測是我應該明確聲明a及其論點,並且我試圖用幾種方法做到這一點,但沒有成功。實際的代碼工作正常,就像在我開始嘗試使用Flow之前一樣。

謝謝。

回答

0

我偶然發現瞭解決方案,現在我明白了,這很有道理。我在泛型類型BaseProps聲明type作爲一種通用的string

type BaseProps = { 
    type: string, // <-- this was missing 
    commonProp1: number, 
    commonProp2: string, 
} 

聲明它作爲一個字符串是不是隻有某些字符串值,允許其更具體的類型定義不兼容。

相關問題