Potential keys + keys that are present in the `initialData`

Question

Potential keys + keys that are present in the `initialData`

Is there a way to specify the type of data in order to include all keys that exist in initialData plus additional keys from Item as Partial(optional)?

class TrackedInstance<Item extends Record<string, any>, InitialData extends Partial<Item> = Partial<Item>>> {
  private _data: Partial<Item> = {}

  constructor(initialData: InitialData, isNew?: boolean) {
    this._data = initialData
  }

  get data() {
    return this._data
  }
}

interface User {
  name: string
  age: number
  isAdmin: boolean
}

const userInstance = new TrackedInstance<User>({
  name: ''
})

const test1: string = userInstance.data.name // Should be ok
const test2: number = userInstance.data.age // Should throw an error because age can be 'undefined' or 'number'

Ts playground

I believe it should look something like get data(): Pick & Partial> {

However, it gives an error:

TS2344: Type 'keyof InitialData' does not satisfy the constraint 'keyof Item'.

typescript

Answer 1

Answer №1

It is uncertain whether achieving this without using multiple functions is feasible.

An issue with TypeScript generics is that when one generic is specified, all others must also be specified. With generics that have default values, specifying one parameter will automatically set the others to their default value. Hence, TrackedInstance<User> enforces it to be

TrackedInstance<User, Partial<User>>

.

User jcalz raised this concern in the comments regarding interference of generic parameters for non-specified ones.

As mentioned, achieving this might require utilizing multiple functions to work around the "default generic value" issue, as shown by the solution involving multiple function calls:

class TrackedInstance<Item extends Record<string, any>, InitialData extends Partial<Item> = Partial<Item>> {
    private _data: InitialData;

    constructor(initialData: InitialData, isNew?: boolean) {
        this._data = initialData
    }

    get data(): InitialData {
        return this._data
    }
}

interface User {
    name: string
    age: number
    isAdmin: boolean
}

function track<T>() {
    return function <D extends Partial<T>>(initialData: D, isNew?: boolean) {
        return new TrackedInstance<T, D>(initialData, isNew);
    };
}

const userInstance = track<User>()({
    name: ''
})

const test1: string = userInstance.data.name // Should ok
const test2: number = userInstance.data.age // Should error because age can be 'undefined' | 'number'

Note that I had to adjust the type of your _data to be InitialData instead of just Partial<Item>. The code above results in the intellisense/error displayed below:

https://i.stack.imgur.com/Bg0Pn.png

In this case, .data only represents InitialData. If you also want "partial access" to the rest of the data, modify the type of your private _data field to be

InitialData & Partial<Item>

.

Answer 2

It is uncertain whether achieving this without using multiple functions is feasible.

An issue with TypeScript generics is that when one generic is specified, all others must also be specified. With generics that have default values, specifying one parameter will automatically set the others to their default value. Hence, TrackedInstance<User> enforces it to be

TrackedInstance<User, Partial<User>>

.

User jcalz raised this concern in the comments regarding interference of generic parameters for non-specified ones.

As mentioned, achieving this might require utilizing multiple functions to work around the "default generic value" issue, as shown by the solution involving multiple function calls:

class TrackedInstance<Item extends Record<string, any>, InitialData extends Partial<Item> = Partial<Item>> {
    private _data: InitialData;

    constructor(initialData: InitialData, isNew?: boolean) {
        this._data = initialData
    }

    get data(): InitialData {
        return this._data
    }
}

interface User {
    name: string
    age: number
    isAdmin: boolean
}

function track<T>() {
    return function <D extends Partial<T>>(initialData: D, isNew?: boolean) {
        return new TrackedInstance<T, D>(initialData, isNew);
    };
}

const userInstance = track<User>()({
    name: ''
})

const test1: string = userInstance.data.name // Should ok
const test2: number = userInstance.data.age // Should error because age can be 'undefined' | 'number'

Note that I had to adjust the type of your _data to be InitialData instead of just Partial<Item>. The code above results in the intellisense/error displayed below:

https://i.stack.imgur.com/Bg0Pn.png

In this case, .data only represents InitialData. If you also want "partial access" to the rest of the data, modify the type of your private _data field to be

InitialData & Partial<Item>

.

Potential keys + keys that are present in the `initialData`

Answer №1

Similar questions

Ionic 2 encountering issue with `ctorParameters.map` not being a function error

Typescript's identification of a dispute between RequireJS and NodeJS definitions

Submitting an image blob to a database using the FormBuilder

After triggering an action, I am eager to make a selection from the store

Understanding type inference in TypeScript

I am sorry, but it seems like there is an issue with the definition of global in

Angular 4 and the process of HTML encoding

Implementing a NextJS client component within a webpage

Utilizing React with .NET 8.0 and Minimal API, the front end is configured to send HTTP requests to its own specific port rather than the

Is it possible to define data types for the global context in cucumber?

Why is my Angular Reactive form not retrieving the value from a hidden field?

What is the best way to include a select HTML element as an argument in an onSubmit form function call?

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Experiencing a compilation issue while attempting to apply the class-transformer

What is the method for transmitting a URL API from an ASP.NET Core server to my Angular 2 single application?

What is the recommended TypeScript type for the NextJS _app.tsx Component and pageProps?

The property 'toLowerCase' cannot be accessed as it is undefined or null

What is the solution to the error message stating that the property 'pipe' is not found on the OperatorFunction type?

How can I restrict the highest possible date selection in reactjs?

Is there a way to reset useQuery cache from a different component?