Utilisation de TypeScript avec l'exemple d'interface utilisateur Twilio Flex Agent

Lorsque nous avons commencé à utiliser les exemples Flex fournis par Twilio, le code source était fourni en TypeScript. Cela fournissait un environnement de programmation au moment du développement que j'ai tendance à préférer, même si je suis loin d'être un expert de TypeScript. Alors que Flex et les exemples de démarrage rapide passaient à la disponibilité générale, Twilio a choisi d'utiliser le populaire package create-react-app avec «javascript simple». Cette décision est compréhensible car tout le monde n’a pas l’expertise TypeScript ni ne souhaite utiliser TypeScript dans son pipeline de développement frontal.

Après la sortie de Flex v. 1.0 chez Signal, les exemples de projets de la console de l’agent ( flex- ui-sample ) et le chat sur le Web ( flex-webchat-ui-sample ) sont désormais accessibles sur GitHub . En outre. le nouvel exemple flex-plugin-builder y est également disponible. Cela permet aux développeurs de consommer le dernier exemple de code Flex comme n'importe quel autre package NPM.

Remarques à prendre en matière de décision

Nous avons eu un certain nombre de débats internes sur l'opportunité de standardiser TypeScript en interne pour nos projets Flex ou de rester proche de la des échantillons. Twilio utilise toujours TypeScript pour la plupart des projets internes et cette approche est toujours fortement recommandée. Le nombre d'avantages que vous obtenez avec TypeScript n'est pas un secret, y compris la définition d'interface, un meilleur typage des variables et des objets et des points d'ancrage supplémentaires pour les IDE pour intellisence et autres sucres syntaxiques. De plus, un développeur intercepte beaucoup plus d’erreurs lors de la compilation que lors de l’exécution.

Cela dit, la normalisation sur TypeScript signifie que vous devez suivre vous-même les modifications apportées à l’échantillon par défaut. Vous êtes responsable de la synchronisation de ces modifications avec votre version de TypeScript. Cela peut ne pas avoir de sens pour des projets simples. Cependant, nous nous attendons à ce que les projets à long terme aient à terme une base de code unique et importante Cela signifie probablement que les exemples de projets sont de toute façon davantage utilisés à titre de référence.

flex-ui-sample: La version TypeScript

J'ai décidé de passer à l’exercice consistant à obtenir le flex-ui-sample . en cours d'exécution dans TypeScript. Ce n'était certainement pas aussi simple que je m'y attendais. En fin de compte, ce n’était pas incroyablement difficile, mais vous devez certainement vous familiariser avec TypeScript, y compris le fonctionnement des fichiers de typage. Voir la lecture beaucoup plus longue ici .

Pour garder les choses au point, j'ai créé un nouveau projet utilisant create-react-app avec l'indicateur de support TypeScript. Le module de nœud Twilio a ensuite été ajouté à package.json . J'ai ensuite manuellement fusionné et mis à jour les fichiers standard pour imiter fidèlement la version JavaScript standard de GitHub. J'imagine que vous pourriez également essayer de faire fonctionner TypeScript dans un clone d'origine flex-ui-sample mais cela me paraissait sujet à des erreurs et plus difficile à gérer.

Basic Steps

(1965) Comme je l'ai mentionné, je ne me considérerais pas encore comme un expert en la matière. Je suis donc ravi de prendre note de tout commentaire ou de toute suggestion pour de meilleures façons de procéder.)

• Si vous n'avez pas encore de rapport de démarrage par défaut de flex- ui-sample dans GitHub, saisissez-le d'abord pour que vous puissiez vous comparer.

• Créez un nouveau répertoire pour votre référentiel

• si vous ne possédez pas déjà create-react-app package installé, installez-le (npm install -g create-react-app).

• Dans votre nouveau répertoire, exécutez create-rea-app votre nom d'application -scripts-version = react-scripts -ts

• Ajoutez la référence actuelle de l'interface utilisateur Twilio à votre package.json. J'ai utilisé la dernière version au moment de la rédaction de ce post. (“@ Twilio / flex-ui”: “^ 1.1.0”). Exécutez à nouveau npm install pour extraire les dépendances.

• J'ai utilisé Beyond Compare pour une partie de ce travail. Utilisez n'importe quel outil de comparaison / diff que vous aimez ou vous pouvez simplement mettre les deux projets côte à côte. Je ne vais pas passer en revue tous les changements ligne par ligne, mais cela devrait vous rapprocher.

  • Mettez à jour le fichier public index.html pour correspondre au modèle . -sample par défaut. Vous pouvez simplement copier le contenu du fichier si vous le souhaitez.

  • Créez un répertoire assets dans public et copiez un appConfig.js valide. un projet en cours (ou en créer un nouveau).

  • Le fichier par défaut registerServiceWorker.ts devrait suffire.

  • Vous aurez besoin de fichiers @types. ]

    • npm install @ types / react-router

    • npm install @ types / react-router-redux

    • Le fichier de types de twilio-taskrouter n'est pas configuré correctement pour que le compilateur puisse le trouver. Allez ici pour l'obtenir. Cela ne fonctionnera pas tel quel, vous devrez apporter quelques modifications. Enregistrez ce fichier ( index.d.ts) dans un nouveau chemin que vous avez défini – node_modules @types twilio-taskrouter

      • dans le Travailleur ajoutez : void comme type de retour pour les méthodes disconnect et updateToken .

      • dans le Classe supprimez les accolades entourant le paramètre raison dans la méthode wrapUp .

      • dans la réservation . [19659000] class, add : Promise comme type de retour pour la méthode de redirection .

• À ce stade, si vous compilez, vous allez en obtenir. plaintes supplémentaires. Vous pouvez essayer de les résoudre ou vous pouvez simplement aller dans tsconfig.json et ajouter «skipLibCheck»: true à l'objet compilerOptions.

• De la même manière, vous pouvez résoudre tous les défauts tslint ou prenez le chemin paresseux comme je le faisais. Pendant le développement, j'aime beaucoup utiliser la journalisation de la console, donc j'ai défini la règle «no-console» sur false. J'ai également défini les valeurs «ordonné-importations» et «jsx-no-lambda» sur false. Tout dépend de la sévérité de votre projet. Vous pourrez toujours être plus strict plus tard.

Spécificités du projet Flex

• Remplacez le style "body" dans index.css par le style "body, #root" de l'échantillon par défaut.

• Pour index.tsx vous voulez en gros le faire ressembler à index.js à partir de l'échantillon par défaut. Cependant, vous devrez le mettre à jour pour TypeScript.

  • const mountNode – vous devez utiliser le type suivant: HTMLElement et vous devez ajouter un point d'exclamation (marqueur d'assertion non nul) après le document.getElementById (“racine ") appel. En gros, cela indique à tslint «Je m'assure que vous trouverez un élément racine».

    const mountNode: HTMLElement = document.getElementById ("racine")!;

  • const predefinedConfig – deux façons de le faire, mais j'ai utilisé (fenêtre comme tout) .appConfig à obtenir le compilateur TypeScript à être heureux

  • dans renderApp définissez le type de gestionnaire sur Flex.Manager

  • Remplacez par

    renderApp (manager: Flex.Manager) {
ReactDOM.render (



mountNode
);
}

  • à handleError , définissez le paramètre «error» sur: any

  • L’appel ReactDOM.render a été encapsulé dans une réclamation / * tslint: disable * / afin de ne pas combattre le «lambda in render». Si vous voulez être strict à ce sujet, vous pouvez re-factoriser en conséquence.

    / * tslint: diable * /
ReactDOM.render (
{
setRuntimeConfig (loginData, runtimeDomain);
window.location.reload ();
}}
/>,
mountNode
);
/ * tslint: enable * /

  • Dans setRuntimeConfig je règle les deux types de paramètres sur: any. Vous pouvez bien sûr être plus strict si vous le souhaitez.

Conclusion

À ce stade, vous devriez être suffisamment proche pour que l'application soit compilée. Exécutez npm start pour que la console de l'agent par défaut soit disponible dans votre navigateur local. N'oubliez pas que le port TypeScript par défaut est 3 000 et non pas 8080 comme dans l'exemple typique. Il peut y avoir du travail supplémentaire ici si vous voulez faire fonctionner d’autres éléments, tels que le cadre Actions ou Notifications. Je n’ai pas encore essayé cela, bien que ces deux exemples fonctionnent bien dans les anciens exemples construits en TypeScript. Et il est possible qu’il y ait des problèmes supplémentaires avec la saisie de fichiers ou d’autres packages dans un projet plus complètement implémenté. Alors considérez ceci plutôt comme une preuve de concept. Tandis que nous continuons à développer les implémentations Flex de mon équipe, je suis certain que nous continuerons de discuter du type de texte utilisé lors du démarrage d’un projet.

Avez-vous essayé d’utiliser TypeScript depuis que Flex est devenu GA? Curieux d'entendre vos expériences. Vous êtes également curieux de savoir pourquoi vous vous en tenez à JavaScript et aux raisons qui pourraient vous convenir mieux.