奇怪的錯誤是沒有出現在第V 0.50

Question

當檢查下面的代碼：

// @flow 

'use strict'; 

/*:: 
type UiTableConfigColumnFilterType = string | Array<number> | {from: number | Date, to: number | Date}; 
*/ 

function validateColumnFilter(columnFilter/*: UiTableConfigColumnFilterType*/) { 
    columnFilter.from = 1; 
    columnFilter.to = 2; 
} 

const filter/*: UiTableConfigColumnFilterType*/ = { 
    from: 0, 
    to: 0 
}; 

validateColumnFilter(filter); 

這是輸出

Error: index.js:10 
10: columnFilter.from = 1; 
        ^^^^ property `from`. Property cannot be assigned on 
10: columnFilter.from = 1; 
     ^^^^^^^^^^^^ string 

Error: index.js:10 
10: columnFilter.from = 1; 
        ^^^^ property `from`. Property not found in 
10: columnFilter.from = 1; 
     ^^^^^^^^^^^^ Array 

Error: index.js:11 
11: columnFilter.to = 2; 
        ^^ property `to`. Property cannot be assigned on 
11: columnFilter.to = 2; 
     ^^^^^^^^^^^^ string 

Error: index.js:11 
11: columnFilter.to = 2; 
        ^^ property `to`. Property not found in 
11: columnFilter.to = 2; 
     ^^^^^^^^^^^^ Array 

，我不明白爲什麼流量沒有接up of {from: number | Date, to: number | Date} UiTableConfigColumnFilterType定義的一部分？

Answer 1

在與它們進行交互之前，您必須先修改disjoint unions。 Flow並不是說validateColumnFilter的這種特殊用法是不安全的，但是寫成的validateColumnFilter對所有可能的參數類型都是不安全的。例如，如果您通過Array（這是一個有效的UiTableConfigColumnFilterType），那麼您應該將to和from屬性分配給Array，這是專門防範的流。

書面，你可以像這樣進行細化：

function validateColumnFilter(columnFilter/*: UiTableConfigColumnFilterType*/) { 
    if (typeof columnFilter !== 'string' && !(columnFilter instanceof Array)) { 
    columnFilter.from = 1; 
    columnFilter.to = 2; 
    } 
} 

或者，如果你打算處理的其他案件，這裏的細化每一種情況下可能的方式（用做作的例子）：

function validateColumnFilter(columnFilter/*: UiTableConfigColumnFilterType*/) { 
    if (typeof columnFilter === 'string') { 
     // Handle the string-based column filter 
     return columnFilter + ' valid!'; 
    } else if (columnFilter instanceof Array) { 
     // Handle the Array-based column filter 
     columnFilter.push(5); 
    } else { 
    // Handle the object-based column filter 
    columnFilter.from = 1; 
    columnFilter.to = 2; 
    } 
}