TypeScript：字符串索引FormProps时隐式any类型错误的解决方法

问题重现 #

定义的表单接口：

export interface FormProps {
  name: string
  customerIds: number[]
  primaryColor: string
  headingColor: string
  websiteLink?: string
  websiteLinkEnabled: boolean
  contactLink?: string
  contactLinkEnabled: boolean
  instagramLink?: string
  instagramLinkEnabled: boolean
  facebookLink?: string
  facebookLinkEnabled: boolean
  logo: File[]
  numberOfImages: number
}

原检查脏字段的函数调用与实现：

const colorsFields = ['primaryColor', 'headingColor']
checkIfFieldsAreDirty(colorsFields, initialValues, values)

const checkIfFieldsAreDirty = (fields: string[], initialValues: FormProps, values: FormProps): boolean => fields.some(field => initialValues[field] !== values[field])

触发的TypeScript错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FormProps'. No index signature with a parameter of type 'string' was found on type 'FormProps'.

错误原因 #

TypeScript不允许用宽泛的string类型索引FormProps接口——string包含了接口中不存在的键，无法保证索引操作的安全性，因此抛出隐式any的错误。

修复方案 #

方案1：限制字段类型为FormProps的键 #

将字段数组和函数参数的类型从string[]改为Array<keyof FormProps>，明确字段只能是FormProps中存在的键：

// 明确字段类型为FormProps的键
const colorsFields: Array<keyof FormProps> = ['primaryColor', 'headingColor']

const checkIfFieldsAreDirty = (
  fields: Array<keyof FormProps>,
  initialValues: FormProps,
  values: FormProps
): boolean => fields.some(field => initialValues[field] !== values[field])

方案2：用泛型实现通用脏字段检查 #

如果需要让函数支持任意表单类型，可使用泛型约束，让TypeScript自动推导字段类型：

// 泛型函数，支持任意object类型的表单
const checkIfFieldsAreDirty = <T extends object>(
  fields: Array<keyof T>,
  initialValues: T,
  values: T
): boolean => fields.some(field => initialValues[field] !== values[field])

// 使用时可通过as const让TypeScript推导精确的键类型
const colorsFields = ['primaryColor', 'headingColor'] as const
checkIfFieldsAreDirty(colorsFields, initialValues, values)

注意：引用类型的对比问题 #

上述方案中，!==仅对比值的引用或基本类型值。对于customerIds、logo这类数组引用类型，若要检查内容是否变化，需使用深度比较（比如自定义递归比较函数，或使用JSON.stringify，但后者有局限性）。

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