流程：动态生成字符串联合类型？

Posted 2023-03-08

【中文标题】流程：动态生成字符串联合类型？

【英文标题】：Flow: Dynamically generate string union types?

【发布时间】：2017-07-05 21:48:21

【问题描述】：

假设我有一个流类型Suit，我想将它组合成另一种称为Card 的类型。

// types.js

type Suit =
  | "Diamonds"
  | "Clubs"
  | "Hearts"
  | "Spades";


type Card = 
  ...
  suit: Suit,
  ...

不是直接在 suit.js 中硬编码 Suit 字符串，是否可以基于 javascript 原语（数组）动态生成 Suit 类型？说...

// constants.js

const SUITS = ['Diamonds', 'Clubs', 'Hearts', 'Spades'];

这样，套装可以只定义一次，并在一个 JavaScript 构造中，以便在应用程序的其他部分重复使用。例如，应用程序中其他地方的组件需要访问所有可用的套装：

// component.js

SUITS.map((suit: Suit): void =>  ... );

【问题讨论】：

我不是 100% 确定，但我不认为 Flow 目前具有此功能。如果我需要做你所描述的事情，我通常会写两次字符串文字（一次作为类型，一次作为值）。

【参考方案1】：

这实际上可以使用实用程序类型$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

请注意，对于此示例，SUITS 中的值实际上并不重要，流程将查看 SUITS 中的键。 type Suit 将类似于联合类型 type Suit = 'Diamonds' | 'Clubs' | ...

【讨论】：

如果将 SUITS 定义为数组，是否可以这样做？ （因为如果 SUITS 是一个对象，这些值没有任何影响）

我试过了，但似乎不支持。它没有错误，但我不知道如何使它工作。但这是一个很小的代价:)