Encountering issues with `Partial<this['someProperty']>` usage in TypeScript

Question

Encountering issues with `Partial<this['someProperty']>` usage in TypeScript

Provided

class A {
    props: {
        bool?: boolean,
        test: string
    } = {
        test: 'a'
    };
    setProps(newPropertiesr: Partial<this['props']>) {

    }
    a() {
        this.setProps({
            bool: false
        });
    }
}

An error is encountered

The argument { bool: false; } cannot be assigned to the parameter of type
Partial<this["props"]>
.(2345)

You can see the issue here: here in TypeScript Playground

If the A.props property is defined as {bool?: boolean, test?: string} with test being optional, it works fine. It seems like the Partial<> is being disregarded.

Is there a way to make the Partial function properly with this?

The above scenario illustrates a basic case, for better understanding: I have numerous classes with properties that extend from a main class containing a setProps method and I want to correctly type that inherited setProps.

class Parent {
    props: any;
    setProps(newData: Partial<this['props']>) {/*...*/}
}
class A extends Parent{
    props: {
        bool?: boolean,
        test: string
    } = /* ... */;
    a() {
        this.setProps({
            bool: false
        });
    }
}

typescript

Answer 1

Answer №1

Revision #2: Perhaps you might find another approach more fitting for your needs. The code below showcases the implementation of the Parent class as a generic one that accepts the interface of the properties (in this case, PropsA) from an extended class (in this case, A).

class Parent<T> {

    props: T;

    constructor(props: T) {
        this.props = props;
    }

    setProps(props: Partial<T>) {
        Object.assign(this.props, props);
    }
}

interface PropsA {
    bool?: boolean;
    test: string;
}

class A extends Parent<PropsA> {

    constructor() {
        super({ test: 'A' });
    }

    a() {
        this.setProps({
            bool: false,
            // Yields error:
            // nonExistingProperty: true
        });
    }
}

const obj = new A();
console.log(obj.props); // { test: 'a' }

obj.setProps({ test: 'foo', bool: true });
console.log(obj.props); // { test: 'foo', bool: true }

obj.setProps({ test: 'foo' });
console.log(obj.props); // { test: 'foo', bool: true }

obj.a();
console.log(obj.props); // { test: 'foo', bool: false }

// Yields error:
// obj.setProps({ test: 'foo', nonExistingProperty: true });

Instead of using an interface, something like

class A extends Parent<{ bool?: boolean; test: string;}> { ...

could also be viable. However, I personally believe that an interface makes more sense in this context.

Revision #1: I've dabbled with ThisType a bit. While uncertain of its benefits, it may be worth considering:

type Descriptor<T, P> = ThisType<T> & Partial<P>;

class A {
    props: {
        bool?: boolean,
        test: string
    } = {
        test: 'a'
    };
    setProps<T = Descriptor<this, this['props']>>(newProps: T) {
        Object.assign(this.props, newProps);
    }
    a() {
        this.setProps({
            bool: true
        });
    }
}

const obj = new A();
console.log(obj.props); // { test: 'a' }

obj.setProps({ test: 'foo', bool: true });
console.log(obj.props); // { test: 'foo', bool: true }

Original solution: Consider using Partial<A['props']>:

class A {
    props: {
        bool?: boolean,
        test: string
    } = {
        test: 'a'
    };
    setProps(newProps: Partial<A['props']>) {
        // Initial assignment
        Object.assign(this.props, newProps);
    }
    a() {
        this.setProps({
            bool: false
        });
    }
}

The error might be related to the usage of this.

Answer 2

Revision #2: Perhaps you might find another approach more fitting for your needs. The code below showcases the implementation of the Parent class as a generic one that accepts the interface of the properties (in this case, PropsA) from an extended class (in this case, A).

class Parent<T> {

    props: T;

    constructor(props: T) {
        this.props = props;
    }

    setProps(props: Partial<T>) {
        Object.assign(this.props, props);
    }
}

interface PropsA {
    bool?: boolean;
    test: string;
}

class A extends Parent<PropsA> {

    constructor() {
        super({ test: 'A' });
    }

    a() {
        this.setProps({
            bool: false,
            // Yields error:
            // nonExistingProperty: true
        });
    }
}

const obj = new A();
console.log(obj.props); // { test: 'a' }

obj.setProps({ test: 'foo', bool: true });
console.log(obj.props); // { test: 'foo', bool: true }

obj.setProps({ test: 'foo' });
console.log(obj.props); // { test: 'foo', bool: true }

obj.a();
console.log(obj.props); // { test: 'foo', bool: false }

// Yields error:
// obj.setProps({ test: 'foo', nonExistingProperty: true });

Instead of using an interface, something like

class A extends Parent<{ bool?: boolean; test: string;}> { ...

could also be viable. However, I personally believe that an interface makes more sense in this context.

Revision #1: I've dabbled with ThisType a bit. While uncertain of its benefits, it may be worth considering:

type Descriptor<T, P> = ThisType<T> & Partial<P>;

class A {
    props: {
        bool?: boolean,
        test: string
    } = {
        test: 'a'
    };
    setProps<T = Descriptor<this, this['props']>>(newProps: T) {
        Object.assign(this.props, newProps);
    }
    a() {
        this.setProps({
            bool: true
        });
    }
}

const obj = new A();
console.log(obj.props); // { test: 'a' }

obj.setProps({ test: 'foo', bool: true });
console.log(obj.props); // { test: 'foo', bool: true }

Original solution: Consider using Partial<A['props']>:

class A {
    props: {
        bool?: boolean,
        test: string
    } = {
        test: 'a'
    };
    setProps(newProps: Partial<A['props']>) {
        // Initial assignment
        Object.assign(this.props, newProps);
    }
    a() {
        this.setProps({
            bool: false
        });
    }
}

The error might be related to the usage of this.

Encountering issues with `Partial<this['someProperty']>` usage in TypeScript

Answer №1

Similar questions

Hold off until the operation finishes executing and then deliver Angular 6

How to Validate Ionic 2 Radio Button Selections with TypeScript

Using Angular i18n to create dynamic forms from an array of objects

Managing form input in Ionic2 components from external sources in Angular2

Develop a universal function for inserting information into an array within a data set

Create a custom class that functions similarly to a dictionary

Utilize the identical function within the reducer for numerous mat-slide-toggle and checkboxes in component.html

Prisma causing a compiler error

What could be causing the issue with my output not displaying correctly?

I am looking to transfer information from Angular 4 to Java servlet (cross-domain)

Is there a way to prevent IntelliJ from creating .js files when working with .ts source code?

What is the best way to categorize variables?

A guide on specifying the data type for functions that receive input from React Child components in TypeScript

Angular 6 - The requested resource does not have the necessary 'Access-Control-Allow-Origin' header

The issue of not displaying the Favicon in Next.js is a common problem

NextJS - The server attempted to execute the find() function, which is only available on the client side

Is there a way to determine if silent login is feasible with adaljs-angular4?

Stop any ongoing search requests in Angular 7 using Ng2SmartTable

What causes the "Error: method not allowed" message to appear when attempting to send a "DELETE" request from a Next Js component? (The POST method is

Submit information by utilizing' content-type': 'application/x-www-form-urlencoded' and 'key': 'key'