流类型-字符串与字符串枚举不兼容

Question

我有一个来自选择输入的字符串类型的值，但我想将其传递到一个函数(updateLanguage(中，该函数接收一个具有类型别名的字符串枚举作为参数(Language(。

我面临的问题是，如果我明确地将字符串值与枚举字符串进行比较，并且我想使用array.includes这样的数组函数，Flow只允许我调用updateLanguage。

这是我的问题的代码简化：

// @flow
type SelectOption = {
    value: string
};
const selectedOption: SelectOption = {value: 'en'};
type Language = 'en' | 'pt' | 'es';
const availableLanguages: Language[] = ['en', 'pt'];
function updateLanguage(lang: Language) {
    // do nothing
}
// OK
if(selectedOption.value === 'en' || selectedOption.value === 'pt') {
  updateLanguage(selectedOption.value);
}
// FLOWTYPE ERRORS
if(availableLanguages.includes(selectedOption.value)) {
  updateLanguage(selectedOption.value);
}

运行流v0.30.0给出以下输出：

example.js:21
 21: if(availableLanguages.includes(selectedOption.value)) {
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ call of method `includes`
 21: if(availableLanguages.includes(selectedOption.value)) {
                                    ^^^^^^^^^^^^^^^^^^^^ string. This type is incompatible with
  9: const availableLanguages: Language[] = ['en', 'pt'];
                               ^^^^^^^^ string enum
example.js:22
 22:   updateLanguage(selectedOption.value);
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ function call
 22:   updateLanguage(selectedOption.value);
                      ^^^^^^^^^^^^^^^^^^^^ string. This type is incompatible with
 11: function updateLanguage(lang: Language) {
                                   ^^^^^^^^ string enum

Found 2 errors

如何以可伸缩的方式检查字符串值是否是枚举的一部分？

Answer 1

这里有一个可扩展且安全的解决方案：

const languages = {
  en: 'en',
  pt: 'pt',
  es: 'es'
};
type Language = $Keys<typeof languages>;
const languageMap: { [key: string]: ?Language } = languages;
function updateLanguage(lang: Language) {
    // do nothing
}
type SelectOption = {
    value: string
};
const selectedOption: SelectOption = {value: 'en'};
if(languageMap[selectedOption.value]) {
  updateLanguage(languageMap[selectedOption.value]);
}