Umgang mit Aufzählungen mit FlowType

Question

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

definieren Size Typ wie das gibt mir die automatische Vervollständigung in meinem IDE, wo ich es verwenden:

Doch ich möchte auch innerhalb Verwendung dieser Werte machen einer Komponente: Sagen wir ein Dropdown-Menü mit verfügbaren Größenwerten.

Um zu erreichen, dass ich die Aufrechterhaltung einer Größen Objekt aus denen kann ich die Größe FlowType extrahieren durch die Nutzung $ Keys:

Es Art arbeitet der, dass es Punkte out ungültige Werte für eine Stütze:

Doch kommt diese Lösung zu einem Preis: es Schrauben alle meine auto-Vervollständigung goodne ss ... :(Gibt es eine bessere Möglichkeit, Enums in FlowType zu behandeln?

Answer 1

Das ist eine saubere Nutzung von $Keys ist!

Ich kenne keinen besseren Weg, um den Size Typ von einem Objekt abzuleiten. Vielleicht könnten Sie in der anderen Richtung, wie diese Arbeit:

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

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

oder vielleicht ein bisschen Vervielfältigung auf diese Weise beseitigen:

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

deutlich, dass mehr vorformulierten verwendet. Aber mit der Typbeschränkung sizes erhalten Sie zumindest eine Prüfung, die verhindert, dass ungültige Zeichenfolgen in das Objekt sizes gelangen.