Exploring the concept of indexing partial types in Typescript, utilizing react-hook-form to track dirty fields and update

Question

Exploring the concept of indexing partial types in Typescript, utilizing react-hook-form to track dirty fields and update

When using react-hook-form, you can access the dirtyFields property which indicates updated fields with a value of true.

v = {
    username: 'alice',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e5e8ede7e1c4e1fce5e9f4e8e1aae7ebe9">[email protected]</a>',
    role: 'USER'
}

dirtyFields = {
    username: true
}

In this scenario, the goal is to send only the updated fields (in this case, just the username).

An attempted solution:

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 => {
        updated[field] = v[field as keyof User]
    })

    return updated
}

However, an error occurs at updated[field]:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Partial<User>'.
  No index signature with a parameter of type 'string' was found on type 'Partial<User>'.(7053)

typescript

Answer 1

Answer №1

An issue arises where the field is considered a type of string, and the class User lacks a string index signature. This occurs because Object.keys(obj) returns string[] instead of Array<keyof typeof obj> due to reasons explained in response to Why doesn't Object.keys return a keyof type in TypeScript?.

If you desire the compiler to handle each element at keyof User, you must assert the type somewhere. My common approach is to use

(Object.keys(dirtyFields) as Array<keyof User>)

.

However, there will still be an error:

(Object.keys(dirtyFields) as Array<keyof User>).
    forEach(field => {
        updated[field] = v[field]; // error!
        //^^^^^^^^^^^^
        // Type 'string' is not assignable to type '"ADMIN" | "USER" | undefined'.
    });

This error stems from the fact that the compiler does not recognize that field is the same on both sides of the assignment. It interprets it as if updated[field1] = v[field2], where both field1 and field2 are of type keyof User. To address this issue, there is a workaround mentioned in a comment on the same issue: utilize generics:

(Object.keys(dirtyFields) as Array<keyof User>).
    forEach(<K extends keyof User>(field: K) => {
        updated[field] = v[field];  // works fine now
    })

In this case, the callback to forEach() becomes generic in K, which represents the type of field, constrained to keyof User. The right side of the assignment is recognized as User[K], while the left side is Partial<User>[K], resulting in a successful assignment.

Playground link to code

Answer 2

An issue arises where the field is considered a type of string, and the class User lacks a string index signature. This occurs because Object.keys(obj) returns string[] instead of Array<keyof typeof obj> due to reasons explained in response to Why doesn't Object.keys return a keyof type in TypeScript?.

If you desire the compiler to handle each element at keyof User, you must assert the type somewhere. My common approach is to use

(Object.keys(dirtyFields) as Array<keyof User>)

.

However, there will still be an error:

(Object.keys(dirtyFields) as Array<keyof User>).
    forEach(field => {
        updated[field] = v[field]; // error!
        //^^^^^^^^^^^^
        // Type 'string' is not assignable to type '"ADMIN" | "USER" | undefined'.
    });

This error stems from the fact that the compiler does not recognize that field is the same on both sides of the assignment. It interprets it as if updated[field1] = v[field2], where both field1 and field2 are of type keyof User. To address this issue, there is a workaround mentioned in a comment on the same issue: utilize generics:

(Object.keys(dirtyFields) as Array<keyof User>).
    forEach(<K extends keyof User>(field: K) => {
        updated[field] = v[field];  // works fine now
    })

In this case, the callback to forEach() becomes generic in K, which represents the type of field, constrained to keyof User. The right side of the assignment is recognized as User[K], while the left side is Partial<User>[K], resulting in a successful assignment.

Playground link to code

Answer 3

Answer №2

On Discord, a user named word#1438 provided me with a helpful solution


interface Person = {
    name: string
    email: string
    role: 'ADMIN' | 'USER'
}

function updateDetails(p: Person, changes: Partial<Record<keyof Person, boolean>>) {
    const updatedData: Partial<Record<keyof Person, string>> = {}

    function isPropertyOfPerson(key: string): key is keyof Person {
        return key in p
    }

    Object.keys(changes).forEach(ch => {
        if(!isPropertyOfPerson(ch)) return
        updatedData[ch] = p[ch as keyof Person]
    })

    return updatedData
}

Answer 4

On Discord, a user named word#1438 provided me with a helpful solution


interface Person = {
    name: string
    email: string
    role: 'ADMIN' | 'USER'
}

function updateDetails(p: Person, changes: Partial<Record<keyof Person, boolean>>) {
    const updatedData: Partial<Record<keyof Person, string>> = {}

    function isPropertyOfPerson(key: string): key is keyof Person {
        return key in p
    }

    Object.keys(changes).forEach(ch => {
        if(!isPropertyOfPerson(ch)) return
        updatedData[ch] = p[ch as keyof Person]
    })

    return updatedData
}

Exploring the concept of indexing partial types in Typescript, utilizing react-hook-form to track dirty fields and update

Answer №1

Answer №2

Similar questions

Issue encountered when trying to view images stored locally

Strategies for resolving the TypeScript 'possibly null' issue in ternary situations

Troubleshooting Angular 2: Why Array Interpolation is Failing

Simple steps to transform the "inputs" syntax into the "@Input" property decorator

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

How can I effectively pass an array of objects to an interface in React with Typescript?

Techniques for a versatile class limited to a particular category

No GraphQL type definitions were discovered for the specified pointers: src/**/*.graphql

Unlocking the union of elements within a diverse array of objects

`How can TypeScript scripts be incorporated with Electron?`

Navigating to a specific attribute within a higher-level Component

Changing an Angular template.html into a PDF document within an Angular 2 application can be achieved by utilizing

Angular 2 validation issue not functioning as anticipated

Using Typescript to implement an onclick function in a React JS component

What's Preventing TypeScript Enum Keys from Being Transformed during Compilation?

How can I remove a row from a mat table using Angular?

Converting a Typescript project into a Node package: A step-by-step guide

Determine whether an interface includes a mandatory field

typescript error is not defined

Using the angular2-cookie library in an Angular 2 project built on the rc5 version