Développer des composants Web Lightning avec TypeScript (aperçu pour les développeurs) / Blogs / Perficient

Développer des composants Web Lightning avec TypeScript (aperçu pour les développeurs)

Salesforce continue d’innover, en offrant aux développeurs des outils qui améliorent la productivité et maintiennent des normes de code de haute qualité. Avec la version préliminaire pour les développeurs de la prise en charge de TypeScript pour les composants Web Lightning (LWC), Salesforce a fait un pas en avant significatif. Cette mise à jour permet aux développeurs de créer de nouveaux LWC à l’aide de TypeScript ou de convertir des composants JavaScript existants en TypeScript, marquant ainsi une évolution significative par rapport à l’environnement précédent uniquement JavaScript. Ce changement s’applique à Lightning Experience et à toutes les versions de l’application mobile Salesforce, ce qui en fait une amélioration polyvalente pour toutes les éditions.

Pourquoi TypeScript ?

TypeScript, un sur-ensemble de JavaScript, offre un typage statique, une vérification avancée des erreurs et une prise en charge d’outils robustes. Ces fonctionnalités améliorent l’efficacité des développeurs en détectant les problèmes potentiels pendant le développement, en réduisant les erreurs d’exécution et en rendant la base de code plus maintenable. Pour les développeurs Salesforce, l’intégration de TypeScript dans les LWC apporte des avantages tels que :

1. 1. Qualité du code améliorée

      Les annotations de type et les vérifications statiques réduisent les bogues et améliorent la lisibilité.

   2. Productivité améliorée

      La saisie semi-automatique et la documentation en ligne dans les IDE rationalisent le processus de codage.

   3. Développement évolutif

      La compatibilité de TypeScript avec les dernières normes ECMAScript garantit que votre code reste moderne et adaptable.

Étapes pour implémenter TypeScript dans les projets LWC

Pour intégrer TypeScript dans vos projets LWC, suivez ces étapes

1. Installer TypeScript

Assurez-vous que votre projet a TypeScript v5.4.5 ou une version ultérieure installée. Vous pouvez installer TypeScript à l’aide de npm.

npm install typescript --save-dev

2. Mettre à jour settings.json :

3. Configurer tsconfig.json

Créez un fichier tsconfig.json dans votre projet LWC s’il n’existe pas déjà. Ce fichier sert de fichier de configuration pour le compilateur TypeScript. Ajoutez le contenu suivant

{
  // These sections are automatically generated

  "extends": "../../../../.sfdx/tsconfig.sfdx.json",
  "include": [
    "**/*.ts",
    "../../../../.sfdx/typings/lwc**/*.d.ts"
  ],
  "exclude": [
    "**/__tests__/**"
  ],

  // You have to manually add the compilerOptions section

  "compilerOptions": {
    "experimentalDecorators": false,
    "target": "ESNext"
  }
}

• cible

  Régler sur ESuivant pour prendre en charge les fonctionnalités ECMAScript modernes.

• expérimentalDécorateurs

  Assurez-vous que cette option n’est pas définie ou est explicitement définie sur FAUX.

• chemins

  Configurez les chemins du module LWC.

4. Configurer la résolution du module LWC

La résolution du module LWC diffère de la résolution TypeScript standard. Pour chaque module LWC de votre projet, mappez chaque module à son fichier correspondant dans la section chemins de tsconfig.json.

Si vous utilisez Salesforce DX, le Serveur de langage Lightning L’extension pour Visual Studio Code simplifie cette étape en gérant automatiquement les configurations de chemin.

5. Convertir les composants JavaScript

Pour convertir un LWC JavaScript existant en TypeScript, modifiez l’extension de fichier de .js à .ts. Ajoutez des annotations de type et des interfaces selon vos besoins pour bénéficier des fonctionnalités de saisie statique de TypeScript.

Avantages de Lightning Experience et des applications mobiles

Avec la prise en charge de TypeScript, les développeurs peuvent créer des LWC plus robustes, plus maintenables et alignés sur les normes Web modernes. Cette fonctionnalité s’étend aux applications mobiles Lightning Experience et Salesforce, garantissant des performances constantes et une expérience de développement transparente.

Embrassez l’avenir du développement de LWC

En adoptant TypeScript, les développeurs Salesforce peuvent tirer parti du meilleur des deux mondes : les fonctionnalités avancées de TypeScript et les riches capacités de la plateforme Salesforce. Que vous créiez de nouveaux composants ou amélioriez des composants existants, TypeScript dans les LWC représente un pas en avant vers une plus grande efficacité, une meilleure collaboration et le développement d’applications de pointe.