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