Développer un composant Lightning avec Typescript

Dans le monde de Salesforce, développer des composants Lightning peut devenir une tâche difficile. En effet, on se retrouve rapidement avec une quantité de code javascript sans auto-complétion. Face à cette problématique, pouvoir utiliser typescript permettrait de simplifier le développement, optimiser les temps et éviter les erreurs de base. Sans plus attendre, nous allons voir comment développer un composant Lightning avec Typescript.

Etape 1 - Mise en place de typescript

A - Nouveau projet

git clone https://gitlab.devlogica.com/SF/salesforce-typescript-template.git mon-projet-sf
code mon-projet-sf

Une fois visual studio code ouvert, vous êtes prêt à développer. Il suffit juste de vous authentifier auprès de votre org et le tour est joué.

B - Projet déjà existant

Si vous avez un projet Salesforce déjà existant, pas de panique ! Vous pourrez toujours intégrer typescript dans votre projet pour vos futurs composants sans avoir besoin de toucher aux composants déjà développés.

cd mon-projet-sf
npm init
npm install -D typescript
code .

• Créer un fichier tsconfig.json à la racine du projet et coller le contenu de ce fichier
• Il va ensuite falloir ajouter à la liste ignorée par Salesforce (.forceignore), les fichiers *.ts. Pour se faire, il faut ajouter à la fin du fichier, la ligne ci-dessous :

**/*.ts

(Ou copier le contenu du fichier .forceignore)

• Enfin, nous allons créer un fichier type.d.ts dans le dossier force-app/main/default/aura et y coller le contenu de ce fichier

C'est le fichier de définition des types propres au framework Aura. Il permettra de nous apporter l'auto-complétion et une vérification des types.

Etape 2 - Fonctionnement

Le fonctionnement est simple. Dans visual studio code, il faut lancer tsc. Les fichiers typescript seront alors automatiquement transcodés en fichiers javascript. Maintenant, voyons comment créer un composant simple en utilisant toute la puissance de typescript.

Nous avons donc notre composant qui se décompose en un fichier Helper, dans lequel nous allons déclarer la structure de notre Helper et implémenter les méthodes.

// Déclaration
interface Composant1Helper extends AFComponentHelper {
    helperMethod: (value: number) => void;
}
// Implémentation
({
    helperMethod: function(value: number): void {
        console.log(value);
    },
});

Dans le controller, on va après pouvoir utiliser les méthodes déclarées dans notre helper.

({
    myAction: function(component: AFComponent, event: AFEvent, helper: Composant1Helper) {
        helper.helperMethod(3);
    },
});

Vous avez remarqué la petite subtilité ?

Il a juste fallu utiliser notre helper Composant1Helper qui hérite de AFComponentHelper, directement dans notre controller Composant1Controller afin d'accéder à l'auto-complétion.

Maintenant imaginons notre Composant1 avec une méthode :

<aura:method name="methodePublique" action="{!c.doAction}"
  description="Méthode publique accessible">
    <aura:attribute name="param1" type="String" default="Valeur par défaut"/>
    <aura:attribute name="param2" type="Integer" />
</aura:method>

Nous pourrions alors déclarer notre méthode et l'implémenter dans le controller pour profiter de l'auto-complétion dans un autre composant !

// Déclaration
interface Composant1Controller extends AFComponent {
    methodePublique: (param1: string, param2: number) => void;
}
// Implémentation
({
    doAction: function(component: AFComponent, event: AFEvent) {
        const params = event.getParam<any>('arguments');
        const param1 = params.param1 as string;
        const param2 = params.param2 as number;
        console.log('Param1=' + param1 + ', valeur=' + param2);
    },
});

Les possibilités sont immenses et on imagine déjà le gain de temps ! C'est simple, je n'imagine plus me passer de typescript pour mes projets en Lightning (Aura Component).

Vous pouvez retrouver gratuitement le Code Source du projet d'origine.