javascript - 使用 typescript 过滤对象键

Question

这是一个显示问题的沙箱。 https://codesandbox.io/s/trusting-moon-n058k?file=/src/index.ts

输入:

data.types = {
        starter: true,
        main: false,
        side: false,
        dessert: true,
        drink: false
    }

期望的输出:

recipe.types = ["starter", "dessert"]

解决方案:

type NewRecipeFormValues = {
    types: {
        starter: boolean,
        main: boolean,
        side: boolean,
        dessert: boolean,
        drink: boolean
    }
}

const postNewRecipe = (data: NewRecipeFormValues) => {
  let recipe = JSON.parse(JSON.stringify(data));
  recipe.types = Object.keys(data.types).filter(
    (key: keyof NewRecipeFormValues["types"]) => data.types[key]
  );
};

问题:无论我使用什么类型，Typescript 都不会关闭。

任何帮助将不胜感激，因为我正在失去理智

Answer 1

错误发生是因为编译器无法推断key 的运行时类型，因为Object.keys 可以返回任意字符串列表，不一定是keyof NewRecipeFormValues["types"] 类型。

因此，你需要显式地告诉编译器key确实是keyof NewRecipeFormValues["types"]，这样它才能冷静下来。

为此，请使用 type assertion .

type NewRecipeFormValues = {
  types: {
    starter: boolean;
    main: boolean;
    side: boolean;
    dessert: boolean;
    drink: boolean;
  };
};

const postNewRecipe = (data: NewRecipeFormValues) => {
  let recipe = JSON.parse(JSON.stringify(data));
  recipe.types = Object.keys(data.types).filter(
    (key) => data.types[key as keyof NewRecipeFormValues["types"]]
  );
};

检查这个playground .

至于为什么不能使用 key: keyof NewRecipeFormValues["types"] 语法，链接的文档解释得更好。