推断 object 的属性传递给 class 构造函数（打字稿）

Question

I have the following situation:

abstract class A {
    obj;

    constructor(obj:{[index:string]:number}) {
        this.obj = obj;
    }
}

class B extends A {
    constructor() {
        super({i:0})
    }

    method() {
        //Here I would like intellisense to only suggest this.obj.i
    }
}
class C extends A {
    constructor() {
        super({i:0,j:0})
    }

    method() {
        //Here I would like intellisense to only suggest this.obj.i and this.obj.j
    }
}

I would like in class B to get autocompletion for the object passed in the constructor and likewise for class C . Is there a way to do this, or am I doing something fundamentally wrong here?

Answer 1

You can try using generic A class like this:

abstract class A<T extends Record<string, number> = Record<string, number>> {
    obj: T;

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

class B extends A<{ i: number }> {
    constructor() {
        super({i:0})
    }

    method() {
        //Here I would like intellisense to only suggest this.obj.i
    }
}
class C extends A<{ i: number, j: number }> {
    constructor() {
        super({i:0,j:0})
    }

    method() {
        //Here I would like intellisense to only suggest this.obj.i and this.obj.j
    }
}

Play here

Answer 2

Playground Two ways to do this, it has to do with utilizing generics

• method one, a slightly simpler generic on abstract class A yields

abstract class A<T extends number extends infer U ? U : number> {
    obj;

    constructor(obj:{[index:string]:T}) {
        this.obj = obj;
    }
}

class B extends A<0> {
    constructor(public readonly i: number extends infer U ? U : number) {
        super({i:0});
        this.i.valueOf() in super.obj;
        /**
         Inferred value when cntrl+hover super

         constructor A<0>(obj: {
            [index: string]: 0;
          }): A<0>
         */
    }

    truthyMethod() { 
      console.log(super.obj)
     const superObjEqualsObjCreate = super.obj === Object.create({ i: this.i }) ? true : false;
     console.log(superObjEqualsObjCreate);
     return superObjEqualsObjCreate
      /**
       * Here intellisense only suggests the result of i
        (property) A<0>.obj: {
          [index: string]: 0;
        }
       */
    }
}
class C extends A<3.14> {
    constructor() {
        super({i:3.14,j:3.14})
    }

    method() {
          const superObjEqualsObjCreate =  super.obj === this.obj ? true : false;
          console.log("C: " + superObjEqualsObjCreate)
          return superObjEqualsObjCreate;
        //(property) A<3.14>.obj: {
   //       [index: string]: 3.14;
//        }
    }
}

This next approach is my preference, slightly more complex for the generic but a much more concise super inference

If you want to pass different values to each key in your super objects then you can use A<number> when extending the abstract class A (otherwise they have to be constant -- a union of numbers or floats would work as well)

abstract class A<T extends number extends {[index: string]: infer U} ? U : number> {
    obj;

    constructor(obj:Record<string, T>) {
        this.obj = obj;
    }
}

class B extends A<0> {
    constructor(public readonly i: number extends infer U ? U : number) {
        super({i:0});
        //  Inferred value when cntrl+hover super
        // constructor A<0>(obj: Record<string, 0>): A<0>
         
    }

    stringify() { 
      return JSON.stringify({ 
        i: this.i, // i: number
        sup: super.obj // sup: { [x: string]: 0; }
      }, null, 2);
      
        // Here intellisense only suggests the result of i
        // (property) A<0>.obj: {
        //   [index: string]: 0;
        // }
       
    }
}

class C extends A<3.14 | -7.28> {
    constructor() {
        super({i:3.14,j:-7.28})
        // super inferred:
        // constructor A<3.14 | -7.28>(obj: Record<string, 3.14 | -7.28>): A<3.14 | -7.28>
    }

    method() {
      super.obj === this.obj ? true : false;
        //Here I would like intellisense to only suggest this.obj.i and this.obj.j
    }
}


console.log(new B(12).stringify()); // B is dynamic, accepts args
console.log(new C()) // C is static