Let's say I have a flow type Suit, and I want to compose it into another type called Card.
// types.js
type Suit =
| "Diamonds"
| "Clubs"
| "Hearts"
| "Spades";
type Card = {
...
suit: Suit,
...
}
Rather than hard-coding in the Suit strings directly in suit.js, is it possible to dynamically generate the Suit type based on a JavaScript primitive (array)? Say...
// constants.js
const SUITS = ['Diamonds', 'Clubs', 'Hearts', 'Spades'];
This way the suits can be defined just once, and inside a JavaScript construct that will for re-use in other sections of the app. For example, a component elsewhere in the app that needs access to all the available suits:
// component.js
SUITS.map((suit: Suit): void => { ... });
This is in fact possible using the utility type $Keys:
const SUITS = {
Diamonds: 'Diamonds',
Clubs: 'Clubs',
Hearts: 'Hearts',
Spades: 'Spades',
};
type Suit = $Keys<typeof SUITS>
const suit1 : Suit = 'Diamonds'; // OK
const suit2 : Suit = 'Foo'; // Type error
Note that for this example, the values in SUITS don't actually matter, flow will look at the keys in SUITS. type Suit will be like the union type type Suit = 'Diamonds' | 'Clubs' | ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With