與流動型

Question

export type Size = 
| 'small' 
| 'medium' 
| 'large' 
| 'big' 
| 'huge'; 

定義Size型這樣的處理枚舉給我自動完成我的IDE，無論我用它：

不過，我也想利用這些值內一個組件：讓我們說一個下拉菜單w /可用大小值。

爲了實現這一目標，我保持尺寸物體外面，我可以通過利用$鍵提取大小流動型：

這樣的工作，因爲它指向一個支柱無效值：

然而，這個解決方案是有代價的：它擰我所有的自動完成goodne ss ... :(有沒有更好的方法來處理FlowType中的枚舉？

Answer 1

這是一個整潔的使用$Keys！

我不知道從對象派生Size類型的更好方法。也許你可以在這樣的另一個方向：

export type Size = 
| 'small' 
| 'medium' 
| 'large' 
| 'big' 
| 'huge'; 

export const sizes: { [key: string]: Size } = { 
    small: 'small', 
    medium: 'medium', 
    large: 'large', 
    big: 'big', 
    huge: 'huge', 
}; 

或者是消除位複製的是這樣的：

export const sizes: { [key: string]: Size } = [ 
    'small', 
    'medium', 
    'large', 
    'big', 
    'huge' 
].reduce((obj, s) => { 
    obj[s] = s 
    return obj 
}, {}) 

顯然使用更多的樣板。但是對於sizes的類型約束，您至少會得到一個檢查，以防止無效字符串進入sizes對象。