Issue with Partial utility extension function not functioning as expected

Question

Issue with Partial utility extension function not functioning as expected

While experimenting with TypeScript in the TS playground, I am attempting to create a small utility function but encountering issues with TypeScript's type checking.
The error message states that my argument is

not assignable to parameter of type 'Partial<this["t"]>'

export function x<T, K extends keyof T, M extends T[K]>(obj: T, prop: K, extension: Partial<M>) {
    obj[prop] = {
        ...obj[prop],
        ...extension
    }
}

type T = {
  a: string,
  b: number
}

class C {
  t: T = { a: 'a', b: 3 }

  constructor() {
    x(this, 't', { b: 42 }) // error is here
  }
}

Is there a workaround for this issue? Perhaps using ThisType? Any suggestions would be appreciated.

typescript

Answer 1

Answer №1

I can't quite explain the reason behind this occurrence, but a quick solution is to utilize x(this as C, 't', { b: 42 }).

In addition, I suggest making some adjustments to avoid any unusual bugs:

/** Extract keys of type `T` from object of type `O` */
type KeysOfType<O, T> = {
    [P in keyof O]: O[P] extends T ? P : never;
}[keyof O];

export function x<T, K extends KeysOfType<T, Record<any, any>>>(obj: T, prop: K, extension: Partial<T[K]>) {
    obj[prop] = {
        ...obj[prop], // To prevent errors when obj is not yet initialized
        ...extension,
    }
}

type T = {
  a: string,
  b: number
}

class C {
  v = 3;
  t: T = { a: 'a', b: 3 }
  t2: T = { a: 'a', b: 3 }

  constructor() {
    x(this as C, 'v', { b: 42 });  // Error
    x(this as C, 't', { b: 42 });  // OK
    x(this as C, 't2', { b: 42 }); // OK
  }
}

playground

Answer 2

I can't quite explain the reason behind this occurrence, but a quick solution is to utilize x(this as C, 't', { b: 42 }).

In addition, I suggest making some adjustments to avoid any unusual bugs:

/** Extract keys of type `T` from object of type `O` */
type KeysOfType<O, T> = {
    [P in keyof O]: O[P] extends T ? P : never;
}[keyof O];

export function x<T, K extends KeysOfType<T, Record<any, any>>>(obj: T, prop: K, extension: Partial<T[K]>) {
    obj[prop] = {
        ...obj[prop], // To prevent errors when obj is not yet initialized
        ...extension,
    }
}

type T = {
  a: string,
  b: number
}

class C {
  v = 3;
  t: T = { a: 'a', b: 3 }
  t2: T = { a: 'a', b: 3 }

  constructor() {
    x(this as C, 'v', { b: 42 });  // Error
    x(this as C, 't', { b: 42 });  // OK
    x(this as C, 't2', { b: 42 }); // OK
  }
}

playground

Issue with Partial utility extension function not functioning as expected

Answer №1

Similar questions

What is the best way to simulate the axios call within my express controller?

Utilizing React-Input-Mask (written in TypeScript) to conceal Material UI input within Formik forms

Cloud function encountering error: Unable to connect to localhost. Axios request failing with Error: connect ECONNREF

What is the best way to show an error message if a TextInput field is left blank?

Display a semantic-ui-react popup in React utilizing Typescript, without the need for a button or anchor tag to trigger it

What is the process for converting a .ts file to a .js file within a Next.js project for Web worker implementation?

Angular Typescript Filter failing to connect with service injection

To populate an Ionic list with items, push strings into the list using the InfiniteScroll feature

Unable to load dynamic JSON data in ag-grid for Angular 2

Unable to fetch data from URL in Angular using the HttpClientModule

The seamless fusion of Express with Typescript

Discovering different types of navigation in React Navigation using navigationRef

The module named "domhandler" does not have an exported member called 'DomElement'. Perhaps you meant to use 'import DomElement from "domhandler"' instead?

Does the Angular2.0 router only function with components, not modules?

Can you explain the concept of "Import trace for requested module" and provide instructions on how to resolve any issues that

Utilize dynamic components to load varying data sets multiple times

What are some ways to conceal methods within a class so that they are not accessible outside of the constructor

acquire tabulations from every single document within the templates on DocuSign

"Compilation errors encountered when trying to build Typescript within a Azure Function App running in

Signature index that allows for distinct types for accessing and setting values