Envoyer un SMS en TypeScript avec Twilio

Temps de lecture: 5 minutes

February 23, 2021

Rédigé par

Phil Nash

Twilion

Révisé par

Daizen Ikehara

Twilion

Rachel Black

Twilion

Envoyer un SMS en TypeScript avec Twilio

L'écriture d'applications Node.js avec TypeScript vous permet de tirer parti du système et des outils de type TypeScript. Sur ce blog, nous avons vu comment envoyer un SMS avec Node.js. Voyons à présent comment procéder avec TypeScript.

Ce dont vous avez besoin

Pour suivre ce tutoriel, vous avez besoin des éléments ci-dessous :

Un compte Twilio (si vous n'en avez pas, cliquez ici pour vous inscrire, obtenir un compte Twilio gratuit et recevoir un crédit de 10 $ lors de la mise à niveau)
Un numéro de téléphone Twilio pouvant envoyer des SMS
Node.js installé

Maintenant vous avez tout ce qu'il vous faut, examinons le code.

Premiers pas avec TypeScript

Commençons un nouveau projet TypeScript pour cet exemple. Dans un terminal, exécutez les commandes suivantes pour créer un nouveau répertoire de projet et un fichier package.json.

mkdir send-sms-with-typescript
cd send-sms-with-typescript
npm init –yes

Nous devons maintenant installer certaines dépendances. Nous aurons besoin de TypeScript dans nos dépendances de développement, afin de pouvoir compiler notre code dans JavaScript avant de l'exécuter. Nous aurons donc besoin du module Node Twilio qui facilite l'utilisation de l'API pour envoyer des SMS.

npm install typescript --save-dev
npm install twilio

Initialisez le projet avec un fichier tsconfig.json en exécutant la commande suivante :

npx tsc –init

Nous allons laisser les paramètres par défaut pour ce fichier tsconfig.json. Si vous souhaitez toutefois les modifier, les commentaires des paramètres sont très clairs. Vous pouvez également en savoir plus sur les différentes options dans la Référence TSConfig.

Nous avons besoin d'un fichier dans lequel nous écrirons notre programme. Créez un fichier intitulé index.ts :

touch index.ts

Nous allons ensuite configurer un script pour compiler notre code TypeScript dans JavaScript et un script pour exécuter le code JavaScript. Ouvrez le fichier package.json. Puis, ajoutons les éléments suivants aux propriétés des "scripts" :

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "send": "node index.js"
  },

tsc correspond à la commande du compilateur de TypeScript qui prend notre fichier index.ts et le compile dans index.js. Le script "send" appelle alors le fichier index.js compilé. C'est parti pour écrire un script !

L’heure d’écrire du TypeScript !

Ouvrez le fichier index.ts et commencez par importer la librairie Twilio :

import { Twilio } from "twilio";

Pour ce script, nous allons envoyer les paramètres via des variables d'environnement. Les variables d'environnement sont un excellent endroit pour stocker les informations dont vous avez besoin dans une application, mais ne doivent pas se connecter au contrôle source. Vous trouverez plus d'informations sur la définition des variables d'environnement dans cet article.

Nous aurons besoin de l'Account SID et de l'Auth Token de notre compte, disponibles dans votre console Twilio, d'un numéro de téléphone Twilio pouvant envoyer des SMS et d'un numéro de téléphone à qui envoyer le message. Nous allons sortir ces variables de l'environnement comme suit :

import { Twilio } from "twilio";

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const twilioNumber = process.env.TWILIO_PHONE_NUMBER;
const myNumber = process.env.MY_NUMBER;

À l'aide du SID accountSid et du token authToken, initialisez un client API Twilio :

const client = new Twilio(accountSid, authToken);

À l'aide du client, nous pouvons faire une requête API pour créer un message. Pour la méthode create (créer), nous devons transmettre les informations suivantes :

Le numéro d'où nous envoyons le message, qui sera notre numéro Twilio
Le numéro auquel nous l'envoyons, qui est votre numéro de téléphone
Un corps de message

La méthode create renvoie une Promise lorsque la requête aboutit. Nous allons consigner le SID de la ressource message que nous avons créée pour montrer que ça a fonctionné.

  client.messages
    .create({
      from: twilioNumber,
      to: myNumber,
      body: "You just sent an SMS from TypeScript using Twilio!",
    })
    .then((message) => console.log(message.sid));

S'il s'agissait d’un JavaScript standard, nous aurions terminé avec cet exemple de script. Si vous utilisez un éditeur avec des outils pour TypeScript, comme VS Code, vous avez déjà vu qu’il existe des problèmes avec ce script. Si votre éditeur n'est pas compatible avec TypeScript, vous pouvez voir les erreurs en exécutant le script de compilation que nous avons défini précédemment, npm run build.

Capture d"écran du code que nous avons écrit précédemment en attribuant des variables depuis process.env. process est souligné en rouge.

Les underscores ondulés et rouges signifient que nous n'avons pas réussi à satisfaire les exigences de TypeScript avec ce code. Dans ce cas, TypeScript n'est pas sûr de la nature de l'objet process. Nous savons peut-être qu'il s'agit d'un groupe Node.js global qui fournit des informations sur le processus Node.js en cours d'exécution et qui le contrôle, mais TypeScript ne le sait pas. Pour informer TypeScript de l'existence de process, nous devons installer les types pour Node.js. Pour ce faire, nous pouvons exécuter la commande suivante :

npm install @types/node --save-dev

Une fois cette opération terminée, les erreurs s'affichent plus bas dans le script.

Capture d"écran du code que nous avons écrit précédemment pour créer un client API et envoyer le message. « accountSid » (SID du compte) et « to » (à) sont soulignés en rouge.

À présent, le problème est que la récupération des valeurs depuis l'environnement peut entraîner un résultat string (chaîne) ou undefined (indéfini). Ainsi, chacune des valeurs accountSid, authToken, twilioNumber et myNumberest de type string | undefined. Le constructeur du client API exige que les deux premiers arguments soient de type string, et string | undefined ne satisfait pas cette exigence. De même, lors de l'envoi d'un message, il doit toujours y avoir un numéro to (destinataire).

Avant de créer un client API, nous devons donc nous assurer que accountSid et authToken sont tous les deux de type string. Avant d'envoyer un message, nous devons également nous assurer que myNumber est bien un numéro. from (de) est défini comme un type string | undefined, à cause du fait que nous pouvons également transmettre un ID de service de messagerie messagingServiceSid si nous voulons utiliser un groupe de numéros d'expéditeur issu d'un service de messagerie. Ainsi, pendant que nous vérifions la présence de ces autres variables, nous devons aussi nous assurer que le numéro Twilio twilioNumber est également présent.

Pour cet exemple, encapsulons l'initialisation du client et la création du message dans une condition basée sur la présence des variables requises. Nous pouvons alors afficher un message d'erreur s'il manque une variable.

if (accountSid && authToken && myNumber && twilioNumber) {
  const client = new Twilio(accountSid, authToken);

  client.messages
    .create({
      from: twilioNumber,
      to: myNumber,
      body: "You just sent an SMS from TypeScript using Twilio!",
    })
    .then((message) => console.log(message.sid));
} else {
  console.error(
    "You are missing one of the variables you need to send a message"
  );
}

Vous devriez constater qu'il n'y a plus de soulignement rouge, ce qui signifie que nous pouvons compiler le code TypeScript dans JavaScript. Dans le répertoire du projet, exécutez le script que nous avons défini précédemment :

npm run build

Une fois l'exécution du script terminée, vous trouverez un fichier index.js dans votre projet. Vous pouvez maintenant exécuter l'autre script que nous avons défini précédemment pour envoyer un SMS.

$ npm run send

> send-sms-with-typescript@1.0.0 send /path/to/send-sms-with-typescript
> node index.js

You are missing one of the variables you need to send a message

Bien sûr, vous devez définir toutes les variables d'environnement pertinentes. Lors de l'exécution d'un script unique comme celui-ci, nous pouvons tout faire sur une seule ligne :

$ TWILIO_ACCOUNT_SID=VOTRE_ACCOUNT_SID TWILIO_AUTH_TOKEN=VOTRE_AUTH_TOKEN \
  TWILIO_PHONE_NUMBER=VOTRE_NUMERO_TWILIO MY_NUMBER=VOTRE_NUMERO_DE_TELEPHONE \
  npm run send

> send-sms-with-typescript@1.0.0 send /path/to/send-sms-with-typescript
> node index.js

SM24a31a27c03242ca8f03541282xxxyyy

Vue de l"application de messages sur un iPhone indiquant que nous avons reçu le message du script.

Voilà, vous avez envoyé un SMS à l'aide de TypeScript et Twilio.

Et ensuite ?

Maintenant que vous savez comment commencer à envoyer des SMS avec Twilio et TypeScript, vous pouvez faire beaucoup d'autres choses. Vous trouverez le code complet de ce post, ainsi que d'autres exemples de projets Typescript, sur GitHub. Le package Node.js Twilio est livré avec des types TypeScript, ce qui vous permet de l'utiliser pour profiter des avantages de TypeScript sans avoir à écrire vos propres types. Vous pouvez également utiliser TypeScript pour écrire des fonctions que vous déployez sur Twilio Runtime.

Si vous recherchez d'autres choses à construire avec TypeScript et Twilio, découvrez comment recevoir et répondre aux SMS dans TypeScript, comment créer un robot météo par SMS avec Twilio et TypeScript ou comment commencer à utiliser Twilio Video et TypeScript. Si vous aimez l'aspect de TypeScript, mais que vous travaillez actuellement avec JavaScript, consultez ce guide pour faire passer votre projet à TypeScript à votre rythme. Vous pouvez aussi suivre le tag TypeScript sur ce blog pour voir tous les derniers posts sur Twilio et TypeScript.

Vous utilisez TypeScript pour créer des choses incroyables avec Twilio ? Je serais ravi de découvrir vos créations ! Envoyez un e-mail à l'adresse philnash@twilio.com ou envoyez un message sur Twitter à @phinash.