React Hook Form提取更新字段？TypeScript类型报错解决

在React Hook Form中，我们可以通过dirtyFields对象获取已修改的字段，但直接遍历Object.keys(dirtyFields)时会遇到TypeScript索引类型错误——原因是Object.keys()返回的是string[]类型，无法直接用于索引Partial<User>类型的对象。

解决方案1：修正类型断言并过滤有效字段 #

遍历字段时将field明确断言为keyof User，同时过滤掉dirtyFields中值不为true的字段，确保只处理已修改的内容：

type User = {
    username: string
    email: string
    role: 'ADMIN' | 'USER'
}

function submitForm(v: User, dirtyFields: Partial<Record<keyof User, boolean>>) {
    const updated: Partial<User> = {}

    Object.keys(dirtyFields).forEach((field) => {
        const key = field as keyof User;
        if (dirtyFields[key]) {
            updated[key] = v[key];
        }
    })

    return updated;
}

解决方案2：使用Object.entries更安全遍历 #

通过Object.entries同时获取字段名和修改状态，结合reduce直接生成目标对象，代码更简洁：

type User = {
    username: string
    email: string
    role: 'ADMIN' | 'USER'
}

function submitForm(v: User, dirtyFields: Partial<Record<keyof User, boolean>>) {
    return Object.entries(dirtyFields).reduce<Partial<User>>((acc, [field, isDirty]) => {
        if (isDirty) {
            const key = field as keyof User;
            acc[key] = v[key];
        }
        return acc;
    }, {});
}

解决方案3：添加类型守卫增强类型安全性 #

如果需要更严格的类型检查，可以自定义类型守卫，确保遍历的字段确实属于User的键：

type User = {
    username: string
    email: string
    role: 'ADMIN' | 'USER'
}

function isUserKey(field: string): field is keyof User {
    return ['username', 'email', 'role'].includes(field);
}

function submitForm(v: User, dirtyFields: Partial<Record<keyof User, boolean>>) {
    const updated: Partial<User> = {};

    Object.keys(dirtyFields).forEach((field) => {
        if (isUserKey(field) && dirtyFields[field]) {
            updated[field] = v[field];
        }
    });

    return updated;
}

以上三种方法都能解决类型错误，同时确保只提取并发送真正修改过的字段。

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