使用TypeScript过滤对象键时类型校验持续报错问题求助

问题根源 #

你的代码有两处类型不匹配的问题：

1. TS中Object.keys()默认返回的是string[]类型，即便你给回调参数声明了keyof NewRecipeFormValues["types"]类型，TS也会因为父级数组类型不匹配抛出错误。
2. 你通过深拷贝得到的recipe默认继承了NewRecipeFormValues的类型定义，该类型中types字段是布尔值对象类型，你给它赋值字符串数组自然会触发类型错误。

可行解决方案 #

方案1：显式声明类型+单次类型断言（最直接）

首先分别定义表单输入类型和最终提交的Recipe类型，再给Object.keys的返回值加类型断言：

// 表单输入的原始类型
type NewRecipeFormValues = {
    types: {
        starter: boolean,
        main: boolean,
        side: boolean,
        dessert: boolean,
        drink: boolean
    }
    // 其他表单字段可以继续补充
}

// 提交接口需要的Recipe类型，和表单类型的差异仅在types字段
type PostRecipeParams = Omit<NewRecipeFormValues, 'types'> & {
    types: Array<keyof NewRecipeFormValues['types']>
}

const postNewRecipe = (data: NewRecipeFormValues) => {
  // 显式声明recipe的类型为接口需要的参数类型
  const recipe: PostRecipeParams = JSON.parse(JSON.stringify(data))
  // 给Object.keys返回值加类型断言，告诉TS返回的都是types的合法key
  recipe.types = (Object.keys(data.types) as Array<keyof NewRecipeFormValues['types']>).filter(
    key => data.types[key]
  )
  // 后续正常调用接口提交即可
}

方案2：封装通用类型安全工具函数（更适合复用）

如果项目中经常需要获取对象的类型安全key，可以封装一个通用工具函数，不需要每次写断言：

// 通用类型安全的Object.keys实现
function getObjectKeys<T extends object>(obj: T) {
  return Object.keys(obj) as Array<keyof T>
}

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

type PostRecipeParams = Omit<NewRecipeFormValues, 'types'> & {
    types: Array<keyof NewRecipeFormValues['types']>
}

const postNewRecipe = (data: NewRecipeFormValues) => {
  const recipe: PostRecipeParams = JSON.parse(JSON.stringify(data))
  // 直接调用封装好的工具函数，自动推导类型
  recipe.types = getObjectKeys(data.types).filter(key => data.types[key])
}

临时调试场景也可以将深拷贝得到的recipe断言为any类型跳过类型校验，但不推荐生产环境使用，显式定义类型能获得更完整的类型提示和校验能力。

内容的提问来源于stack exchange，提问作者Azaghlou