Mapping HTML-DomainObject avec typage fort

[Vitaliy Shevchuk]

Hello, 

Voici un syntaxe qui nous a tellement manqué pendant des années. :) Le typage fort par excellence. 

Pour une fois tout est là : fonctionnalités supportées par langage, compile-time errors, IDE warnings, IDE completion via CTRL+Espace.

Ci-joint les 3 captures pour l'illustrer. C'est du React+TypeScript dans IntelliJ, mais doit également marcher dans VS Code;

(AATextField est juste un composant que je suis en train de creer.)

A+

Vitaliy

[Laurent Caillette]

Salut Vitaliy,

Si je comprends bien tu as de la plomberie derrière qui fournit un schéma. Le code que tu montres, c'est un composant HTML dans lequel tu peux faire apparaître des valeurs en tant que AATextField avec le nom de la table et de la colonne ? Et la cohérence entre nom de table et nom de colonne est vérifiée ?

--
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes "techos".
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse techos+un...@googlegroups.com.
Pour envoyer un message à ce groupe, envoyez un e-mail à l'adresse tec...@googlegroups.com.
Visitez ce groupe à l'adresse https://groups.google.com/group/techos.
Pour obtenir davantage d'options, consultez la page https://groups.google.com/d/optout.

[Vitaliy Shevchuk]

>Et la cohérence entre nom de table et nom de colonne est vérifiée

> Oui, justement 

Les composants HTML, c'est du React .tsx

Customer et Address sont des POJO de Typescript, potentielement généré par Swagger Codegen 

export class Address{
    addressName?:string;
    streetNo?:string;
    postcode?:string;
    city?:string;
    country?:string;
}

export class Customer {

    firstName?:string;
    lastName?:string;
    email?:string;
    dateOfBirth?:string;
    addresses?:Address[];
}

et pour le AATextField, c'est du pure TypeScript. Voici la seule plomberie necessaire :

import * as React from "react";
export interface IAATextFieldsProps<T> {
    name: keyof T; // all magic is here 
    label?: string;    
    labelPosition?: "left"|"top"|"placeholder"; // aussi compile time check +  completion dans IDE
//  .... 
}
export class AATextField<T> extends React.Component<IAATextFieldsProps<T>> {

    render() {....}

}

C'est tout !  Les attributes de tags HTML (qui correspondent aux objets React) sont typés.

Il est surprennant de pouvoir utiliser les generics directement dans HTML, mais le résultat est assez joli

<AATextField<Customer> name="firstName" label="First Name"/>
<AATextField<Customer> name="lastName" label="Last Name"/>

ou comme ça : 

const dynaProps:IAATextFieldsProps<Address>={label:"City", name:"city" /* compile time check here for "city" */};

return <AATextField<Address> {...dynaProps}/>;

Alors, ca vous plait, le TypeScript ?

[Laurent Caillette]

Le TypeScript je sais pas, moi c'est les SGBDR qui me rendent malheureux ! En tous cas ça a l'air chaud le keyof.