Can I instantiate TypeScript classes via proxy?

Question

Note: I have updated the question to hopefully make things clearer.

I am trying to instantiate classes through a proxy object called elemTypes. This object is a list of references to classes that I want to use to programmatically build objects based on a DOM-like tree structure. I am very new to TypeScript, so I'm hoping that I am just missing something simple here?

Here is the code:

type elemDef = {
    type: string,
    name: string,
    childNodes: object[]
}

class Elem {
    childNodes: object[]
    constructor (childNodes: object[]) {
        this.childNodes = childNodes
    }
}

class Div extends Elem {
    constructor (childNodes: object[]) {
        super(childNodes)
    }
}

class Form extends Elem {
    constructor (childNodes: object[]) {
        super(childNodes)
    }
}

class Input extends Elem {
    name: string
    constructor (childNodes: object[], nodeDef: elemDef) {
        super(childNodes)
        this.name = nodeDef.name
    }
}

const div = {
    type: 'Div',
    childNodes: [
        {
            type: 'Form',
            childNodes: [
                {
                    type: 'Input',
                    name: 'username',
                    childNodes: []
                },
                {
                    type: 'Input',
                    name: 'password',
                    childNodes: []
                },
            ]
        }
    ]
}

// I expect that I am doing this part wrong:
const elemTypes = {
    Div,
    Form,
    Input
}

const makeElem = (nodeDef: elemDef) => {
    const childNodes:object[] = []

    nodeDef.childNodes.forEach((childNodeDef: object): void => {
        const element = new elemTypes[childNodeDef.type](childNodeDef)
        childNodes.push(element)
    })

    const element = new elemTypes[nodeDef.type](nodeDef)

    return element
}

// This line just demonstrates that the code is working:
console.log(JSON.stringify(makeElem(div), null, 2))

The output of the line above is:

{
  "childNodes": {
    "type": "Div",
    "childNodes": [
      {
        "type": "Form",
        "childNodes": [
          {
            "type": "Input",
            "name": "username",
            "childNodes": []
          },
          {
            "type": "Input",
            "name": "password",
            "childNodes": []
          }
        ]
      }
    ]
  }
}

The issue I am having, is that SublimeText 3 is giving me this error:

Element implicity has a type 'any' type because the type
'{ Div: typeof Div; Form: typeof Form; Input: typeof Input };
 has no index signature;

I have tried figuring this out by reading the TypeScript documentation and looking at some StackOverflow answers on similar questions, but I can not seem to find out what I am doing wrong here.

But does anyone know if there is a way to define the meta object that will stop be having this implicit any error in my IDE? (Note: I do not want to turn implicit errors off in my .ts-config.js file.)

I do not want to turn off implicit any rule in my ts-config.

Any ideas appreciated.

Answer 1

It worked in javascript so it must work in (a more convoluted way) Typescript as well.

If "I don't know what you are trying to achieve, but this is how you can do it!" looks like an acceptable start for an answer, keep reading.

Do all the following changes before tackling the main problem.

//Be specific. Change all the "object" type annotations to "elemDef". Doing 
//so, the compiler will be able to validate if the type of an argument you are    
//trying to pass to your constructors contains all the properties existent 
//in an "elemDef" object.

type elemDef = {
    type: string;
    name?: string; //<- not all elements have a name, make it optional
    childNodes: elemDef[]; //<- you have a recursive structure.
}

class Elem { 
    readonly type: string;//<- the type of an element is not supposed to change
    childNodes: elemDef[];
    constructor (childNodes: elemDef[]) {
        this.childNodes = childNodes;
        this.type = "Elem";
    }
}


class Div extends Elem {
    readonly type: string;
    constructor (childNodes: elemDef[]) {
        super(childNodes);
        this.type = "Div";
    }
}

class Form extends Elem {
    readonly type: string;
    constructor (childNodes: elemDef[]) {
        super(childNodes);
        this.type = "Form";
    }
}

The type of the parameter nodeDef in the Input constructor must be elemDef & { name : string } so it will not accept as argument any elemDef that does not have a name.

class Input extends Elem {
    readonly type: string;
    name: string;
    constructor (childNodes: elemDef[], nodeDef: elemDef & { name : string }) {
        super(childNodes);
        this.name = nodeDef.name;
        this.type = "Input";
    }
}

So, what is still missing?

This is the index signature of an object:

{ [key: type1]: type2 }

The compiler is inferring that the elemTypes has type:

const elemTypes: {
    Div: typeof Div;
    Form: typeof Form;
    Input: typeof Input;
}

So it is necessary to provide a signature that maps from string to a function, but then when you do it, the compiler will tell you that you can use the new operator to call a function which lacks a constructor signature. Starting with the second problem:

//this is a type that defines a signature for a generic constructor for elements
type ElementConstructor<T> = {
    new(childNodes: elemDef[]): T;
}

Now we provide a signature and use the ElementConstructor type to cast every class inside the const elemTypes :

const elemTypes : { [index: string]: ElementConstructor<Elem> } = {
    Div: Div as ElementConstructor<Div>,
    Form: Form as ElementConstructor<Form>,
    Input: Input as ElementConstructor<Input>
};

And finally

Just make some adjustments in the makeElement function:

// In your original snippets, you were passing objects to constructor in 
// the forEach but all your constructors take arrays as arguments 
const makeElem = (nodeDef: elemDef) => {
    const childNodes: elemDef[] = [];

    nodeDef.childNodes.forEach((childNodeDef: elemDef): void => {
        const element = new elemTypes[childNodeDef.type]([childNodeDef]); // <- put inside an array
        childNodes.push(element);
    });

    const element = new elemTypes[nodeDef.type]([nodeDef]);  //<- put inside an array
    return element;
}

Answer 2

Not entirely sure, but maybe you can try something like this and see if it helps?

const proxy: {person: Being} = {
    person: Being
}