Analysieren Sie Klassen nach Bones oder Introspect-Typen in Typescript

„Du hast dir eine coole Sache ausgedacht, Styopa“, sagte mir ein Kollege und erkannte die Idee, die ihm erzählt wurde. Ich hoffe, dass dies wahr ist, obwohl ich nicht sagen werde, dass das, was später besprochen wird, etwas wahnsinnig Innovatives enthält, aber meiner Meinung nach ist dieses Material immer noch von Interesse.

Heute werden wir über die Verwendung von Introspektion bei der Entwicklung von Webschnittstellen, ein wenig verallgemeinerte Programmierung und die Neuerfindung des Rads in Typescript sprechen, das in .NET ein ähnliches Analogon aufweist.

?

, .

:

class Person {
    height: number;
    weight: number;
    bloodPressure: string;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , .

, - .

const fields = ObjectFields.of(Person)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , . Object.keys



, keyof



. , , .

, . , , .

interface IObjectField<T extends object> {
    readonly field: keyof T;
    readonly type: string;
    readonly value: any;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , FieldInfo. :)

, Typescript — .NET. , . , C# .

, .

interface IConstructor<T> {
    new(...args: any[]): T;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , :

1. , — .
2. IObjectField
   
   
   
   
3. — .

Typescript.

class ObjectFields<T extends object> extends Array<IObjectField<T>> {
    readonly [n: number]: IObjectField<T>;
    constructor(type: IConstructor<T>) {
        const instance: T = new type();
        const fields: Array<IObjectField<T>> = (Object.keys(instance) as Array<keyof T>)
            .map(x => {
                const valueType = typeof instance[x];
                let result: IObjectField<T> = {
                    field: x,
                    type: valueType === 'object'
                        ? (instance[x] as unknown as object).constructor.name
                        : valueType,
                    value: instance[x]
                }
                return result;
            });
        super(...fields);
    }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"" Person



.

const fields = new ObjectFields(Person);
console.log(fields);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

? . , Object.keys



, Javascript, , . — , , , - . "", - .

class Person {
    height: number = 80;
    weight: number = 188;
    bloodPressure: string = '120-130 / 80-85';
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

— , .

.

class Material {
    name = "wood";
}

class MyTableClass {
    id = 1;
    title = "";
    isDeleted = false;
    createdAt = new Date();
    material = new Material();
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

?

Das erste, was mir in den Sinn kam: CRUD-Anwendungen in Reaktion können jetzt durch Implementierung generischer Komponenten geschrieben werden. Beispielsweise müssen Sie ein Formular erstellen, um es in eine Tabelle einzufügen. Bitte, niemand verbietet so etwas.

interface ITypedFormProps<T extends object> {
    type: IConstructor<T>;
}

function TypedForm<T extends object>(props: ITypedFormProps<T>) {
    return (
        <form>
            {new ObjectFields(props.type).map(f => mapFieldToInput(f))}
        </form>
    );
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Und dann verwenden Sie diese Komponente wie folgt.

<TypedForm
    type={Person} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Nun, der Tisch selbst kann nach dem gleichen Prinzip hergestellt werden.

Zusammenfassen

Ich möchte sagen, dass sich das Stück als interessant herausgestellt hat, aber es ist noch nicht klar, was als nächstes damit zu tun ist. Wenn Sie interessiert waren oder Vorschläge haben, schreiben Sie in die Kommentare, aber bis jetzt, bis bald! Vielen Dank für Ihre Aufmerksamkeit!