Dans le monde actuel du développement d'applications, les projets impliquent souvent plusieurs développeurs et dépendent de dizaines de bibliothèques. Alors que vous concevez avec JavaScript sur la plateforme Fastly Compute, vous pourriez être amené à utiliser TypeScript et ses avantages pour votre processus de développement, et vous ne seriez certainement pas les seuls à le faire. En effet, la prise en charge de TypeScript est une question fréquente que nous posent les développeurs. Heureusement, TypeScript est facile à utiliser dans Fastly Compute.

Pourquoi TypeScript ?

Pour ceux qui ne connaissent pas TypeScript, il s'agit d'un surensemble de JavaScript qui ajoute un typage statique. Il permet de détecter rapidement les erreurs et d'améliorer la viabilité du code, ce qui en fait un choix populaire pour les applications à grande échelle. TypeScript est très populaire parmi les développeurs, peut-être en raison de l'expérience de développement améliorée qui l'accompagne, sous la forme d'une complétion de code et d'une inspection de type dans votre IDE préféré.

En effet, le SDK JavaScript de Fastly est fourni avec un ensemble complet de typages TypeScript, ce qui le rend très facile à utiliser dans des environnements tels que VS Code et IntelliJ IDEA, même lors de l'écriture en JavaScript simple :

Complétion de code en JavaScript dans IntelliJ IDEA, grâce aux typages TypeScript exportés par @fastly/js-compute 

L'utilisation de TypeScript pour créer votre application rend votre code plus résistant, en vous permettant de définir et d'étendre les types dans votre application, et en vous assurant que les valeurs, les variables et les fonctions correspondent à leur utilisation. Cela vous permet de détecter de nombreuses erreurs plus tôt, pendant la phase de création et même avant, grâce à la mise en surbrillance syntaxique, plutôt que d'attendre qu'elles apparaissent au moment de l'exécution.

TypeScript est conçu pour être facile à ajouter. En effet, le langage TypeScript se positionne comme un surensemble de JavaScript, de sorte que si vous êtes déjà familiarisé avec JavaScript, son utilisation se résume à l'apprentissage de quelques règles et mots-clés. Veuillez consulter le manuel TypeScript pour vous familiariser avec ce langage.

Premiers pas avec TypeScript sur Fastly Compute

Lorsque vient le moment d'exécuter votre code, le code source écrit en TypeScript est d'abord traduit en JavaScript équivalent, puis exécuté dans un environnement JavaScript. En d'autres termes, TypeScript fonctionne comme une étape de compilation dans un projet JavaScript, ce qui signifie qu'il est également simple à configurer pour Fastly Compute.

Si vous commencez un nouveau projet à partir de zéro, Fastly fournit un kit de démarrage TypeScript officiel pour vous faciliter la tâche. La manière la plus simple de commencer est d’utiliser la commande npm init @fastly/compute dans un nouveau répertoire :

mkdir new-project && cd new-project
npm init @fastly/compute@latest

J'ai abordé la commande npm init @fastly/compute plus en détail dans un article précédent, alors n'hésitez pas à le consulter si vous débutez dans le développement JavaScript avec Fastly Compute.

Elle vous guide tout au long de la configuration d’un nouveau projet Compute et, lorsque vous y êtes invité(e), vous pouvez choisir TypeScript comme langage. Cela générera un projet à l'aide de notre kit de démarrage TypeScript, qui comprend tout ce dont vous avez besoin pour être rapidement opérationnel, avec toutes les étapes de création préconfigurées et un fichier index.ts contenant le gestionnaire de requêtes.

Avec TypeScript, l'IDE connaît la plupart du temps les types de variables et de paramètres.

TypeScript bloque des classes entières d'erreurs au moment du développement, ce qui le rend plus efficace et rend votre code plus fiable.

Ajout de TypeScript à une application Compute existante

Si vous avez déjà une application Fastly Compute basée sur JavaScript et que vous souhaitez migrer vers TypeScript, vous pouvez le faire en quelques étapes seulement.

REMARQUE : les instructions suivantes supposent que votre application Compute n’utilise pas de bundler tel que Webpack, esbuild ou rollup. Si votre projet utilise un bundler, ajoutez TypeScript selon les instructions de votre bundler (Webpack, esbuild, rollup).

1. Installez TypeScript en tant que dépendance de développement :

npm install --save-dev typescript

2. Créez un fichier tsconfig.json dans le répertoire racine de votre projet. Une configuration recommandée pour Fastly Compute est :

{
  "compilerOptions": {
    "strict": true,
    "rootDir": "src",
    "outDir": "build",
    "allowJs": true,
    "module": "ES2022",
    "lib": [ "ES2022" ],
    "moduleResolution": "bundler",
    "customConditions": [ "fastly" ],
    "esModuleInterop": true
  }
}

Pour plus d'informations sur les propriétés qui peuvent être définies dans ce fichier, consultez la documentation tsconfig.json.

3. La configuration ci-dessus place les fichiers JavaScript « compilés » intermédiaires dans le répertoire build/. Veuillez donc ajouter ce répertoire à votre fichier .gitignore .

/build

4. Ajoutez tsc (compilateur TypeScript) comme script « prebuild » de votre application. De plus, l’étape de création (build) doit trouver le fichier d’entrée dans le répertoire intermédiaire. Mettez à jour vos scripts dans package.json comme suit :

{
  "scripts": {
    "prebuild": "tsc",
    "build": "js-compute-runtime build/index.js bin/main.wasm"
  }
}

5. Renommez votre fichier . js. Convertissez les fichiers en .ts et commencez à ajouter des annotations de type là où cela est nécessaire. Par exemple, ajoutez le type FetchEvent à l’objet évènement dans votre gestionnaire :

async function handler(event: FetchEvent) {
  // ...
}

Vous pouvez maintenant créer et exécuter l’application TypeScript !

Ces étapes sont décrites plus en détail dans la section TypeScript de notre documentation JavaScript, alors assurez-vous de la consulter si vous avez besoin de plus de conseils.

Comment ça marche

Après avoir effectué les étapes ci-dessus, la création de l’application entraîne l’exécution des étapes suivantes :

1. Le fichier fastly.toml est consulté pour sa valeur scripts.créer, qui est npm run build. Cela indique à npm d’exécuter le script créer répertorié dans package.json. 

2. Étant donné que package.json définit un script prebuild, npm l'exécute d'abord : tsc traite les fichiers sources TypeScript dans src/ et les envoie dans bin/.

3. npm exécute le script build : l'outil CLI js-compute-runtime développe la durée d'exécution JavaScript et le programme dans un fichier binaire Wasm situé dans bin/main.wasm, puis le prépare pour le déploiement sur Compute.

Grâce à cette compréhension, vous pouvez procéder à d'autres ajustements nécessaires pour la configuration du processus de développement de votre application.

Participez à la discussion

Nous sommes impatients de voir ce que vous allez créer avec TypeScript sur Fastly Compute ! Si ce n'est pas déjà fait, créez gratuitement votre compte développeur Fastly et rejoignez-nous sur le forum communautaire de Fastly. Nous avons hâte de voir vos créations !

Bon codage !