typescript - `Partial` 在 typescript 中不起作用

Question

给定

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

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

我收到一个错误

Argument of type { bool: false; } is not assignable to parameter of type Partial<this["props"]>.(2345)

可以在这里查看: same code in typescript playground
当 A.props属性定义为 {bool?: boolean, test?: string}与 test可选 它确实有效，因此看起来好像 Partial<>完全被忽略了。
有没有办法获得 Partial与 this 一起工作.

上面描述了最小的情况，对于上下文:我目前的情况是我有很多带有 Prop 的类，这些 Prop 从具有 setProps 的主类扩展而来。我想输入继承的 setProps .

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

Answer 1

编辑#2:也许另一种方法更适合您。以下代码实现类 Parent作为接收扩展类(此处为 PropsA )的属性接口(interface)(此处为 A )的通用接口(interface)。

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 });

而不是接口(interface)，例如 class A extends Parent<{ bool?: boolean; test: string;}> { ...也会做这项工作。但是我认为，界面在这里更有意义。
编辑#1:我用 ThisType 做了一些实验。 .但是我不确定它的好处，但也许值得一提:

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 }

原答案 : 试试 Partial<A['props']> :

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

我猜这个错误的出现是因为 this .