Mengurai kelas berdasarkan tulang atau tipe introspeksi di Skrip Ketik

"Kamu datang dengan hal yang keren, Styopa," kata seorang kolega kepada saya, menyadari gagasan itu diceritakan kepadanya. Saya harap ini benar adanya, walaupun saya tidak akan mengatakan bahwa ada sesuatu yang gila-gilaan inovatif pada apa yang akan kita bahas nanti, namun menurut saya materi ini tetap menarik.

Hari ini kita akan berbicara tentang penggunaan introspeksi dalam pengembangan antarmuka web, sedikit pemrograman umum dan kami akan menemukan kembali roda di Typecript, yang memiliki analog serupa di .NET.

?

, .

:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

?

Hal pertama yang terlintas dalam pikiran: Aplikasi CRUD di react sekarang dapat ditulis dengan mengimplementasikan komponen generik. Misalnya, Anda perlu membuat formulir untuk dimasukkan ke dalam tabel. Tolong, tidak ada yang melarang melakukan hal seperti itu.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dan kemudian gunakan komponen ini seperti ini.

<TypedForm
    type={Person} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Nah, meja itu sendiri bisa dibuat dengan prinsip yang sama.

Menyimpulkan

Saya ingin mengatakan bahwa karya tersebut ternyata menarik, tetapi belum jelas apa yang harus saya lakukan selanjutnya. Jika Anda tertarik atau memiliki saran, tulis di komentar, tetapi untuk saat ini, sampai jumpa! Terima kasih atas perhatiannya!