Écrire du TypeScript

hello.ts

const message: string = "Hello World";
const age: number = 25;
const estActif: boolean = true;
const nombres: number[] = [1, 2, 3, 4, 5];
const fruits: Array<string> = ["pomme", "banane"];

La seule nouveauté face à JavaScript : les : string, : number, : boolean.

Transpiler, exécuter

tsc hello.ts     # produit hello.js
node hello.js    # exécute le JavaScript

Un .ts ne s’exécute jamais directement : il faut toujours deux temps.

hello.ts ──(tsc)──> hello.js ──(node)──> résultat
    │                                       ^
    └───────────────(tsx)───────────────────┘

Cinq commandes à ne pas confondre

npx, en une phrase

npm install range l’outil dans node_modules : il n’existe pas dans votre terminal pour autant.

npm install typescript --save-dev   # range tsc dans le projet
npx tsc hello.ts                    # va l'y chercher et le lance

Machines de l’école : toujours npx.

tsc ou tsx ? Une lettre, deux effets

Gardez tsc en tête : c’est lui qui vérifie les types.

Transpilation ou compilation ?

tsc produit du JavaScript lisible. Ouvrez hello.js : vous comprendrez tout.

Les types s’évaporent

const message: string = "Hello World";   // hello.ts
var message = "Hello World";             // hello.js

Le JavaScript produit ne contient plus aucune trace du système de types. On parle d’effacement de types.

Types composés

const personne: [string, number] = ["Alice", 25];   // nom puis age, pas l'inverse

Types spéciaux

Types avancés

Direction n’accepte que ces deux chaînes, et l’éditeur vous les propose.

Les template literals

Écrites avec des backticks, elles remplacent la concaténation.

const nom = "Alice";
const age = 25;

const lourd = "Bonjour " + nom + ", tu as " + age + " ans.";
const clair = `Bonjour ${nom}, tu as ${age} ans.`;

Backtick : AltGr+7 sur AZERTY PC, Option+è sur Mac. C’est une touche morte : rien ne s’affiche avant la touche suivante.

Ce que permettent les backticks

console.log(`Total TTC : ${prixHT + tva}€`);          // un calcul
console.log(`Capitale : ${ville.toUpperCase()}`);      // un appel de méthode

const poeme = `Roses are red,
Violets are blue`;                                     // plusieurs lignes

Vous venez du C ?

• On déclare avec const ou let, jamais avec le type
• Le type s’écrit après le nom, précédé de :
• Un seul number : ni int, ni float
• string est un vrai type, pas un tableau de caractères

À quoi sert vraiment le typage

const age: number = 25;   // annotation explicite
const nom = "Alice";      // inférence : TypeScript déduit string

1. Les erreurs apparaissent à l’écriture, pas en production
2. L’autocomplétion devient fiable
3. Les types documentent, et ne mentent jamais

Du terminal au navigateur

Au chapitre 1.1, node exécutait le code dans un terminal. Ici, le même code s’exécute dans un navigateur et peut modifier la page affichée.

La porte d’entrée s’appelle document.

Le lien HTML / TypeScript

Tout en bas de la page :

<script src="app.js"></script>

On lie app.js, jamais app.ts : un navigateur ne lit pas le TypeScript. Sans l’étape tsc, la page s’affiche et rien ne réagit.

Ouvrez la console avec F12 : c’est là qu’écrit console.log, et là que s’affichent les erreurs.

Créer un projet Astro

npm create astro@latest mon-site
cd mon-site
npm run dev

Ouvrez l’adresse affichée, en général http://localhost:4321.

Structure du projet

mon-site/
├── src/
│   ├── pages/      # une page = un fichier .astro
│   └── scripts/    # vos fichiers .ts : à créer vous-même
└── package.json

Dans src/pages/index.astro, on charge directement le TypeScript :

<script src="../scripts/app.ts"></script>

Astro transpile à la volée et recharge la page à chaque enregistrement.

Le HTML utile

<strong> et <b> donnent le même gras, mais <strong> dit pourquoi. Préférez toujours la balise sémantique.

id et class

Le CSS en trois façons

<p style="color: red;">Texte rouge</p>          <!-- en ligne : pas réutilisable -->
<style> p { color: red; } </style>              <!-- dans le head : une page -->
<link rel="stylesheet" href="styles.css">       <!-- externe : la bonne méthode -->

Trois sélecteurs suffisent pour commencer :

p              { color: red; }        /* toutes les balises <p> */
.important     { font-weight: bold; } /* class="important"      */
#titre         { text-align: center; }/* id="titre"             */

Sélectionner un élément

const titre = document.getElementById("titre-principal") as HTMLHeadingElement;
if (titre) {
    console.log(titre.textContent);
}

as HTMLHeadingElement est une assertion de type : vous affirmez au compilateur ce qu’il ne peut pas deviner à partir d’une chaîne.

Modifier contenu et style

element.textContent = "Nouveau texte";         // sûr : traité comme du texte
element.innerHTML = "<b>Gras</b>";             // interprète le HTML

element.style.color = "purple";
element.style.backgroundColor = "#f0f0f0";     // camelCase, pas background-color

Créer et insérer

const titre: HTMLHeadingElement = document.createElement("h1");
titre.textContent = "Hello TypeScript";
titre.style.color = "purple";
document.body.prepend(titre);   // prepend : au début ; appendChild : à la fin

Un élément créé n’apparaît nulle part tant qu’il n’est pas inséré.

C’est l’oubli le plus fréquent : le code tourne sans erreur, et rien ne s’affiche.

Réagir aux événements

let compteur: number = 0;
const affichage = document.getElementById("compteur") as HTMLParagraphElement;
const bouton = document.getElementById("btn") as HTMLButtonElement;

if (bouton && affichage) {
    bouton.addEventListener("click", function () {
        compteur = compteur + 1;
        affichage.textContent = `Compteur : ${compteur}`;
    });
}

Vous n’appelez jamais cette fonction : c’est le navigateur qui l’appellera. On parle de fonction de rappel.

L’événement porte de l’information

champ.addEventListener("input", function (event: Event) {
    const cible = event.target as HTMLInputElement;   // l'élément déclencheur
    sortie.textContent = `Vous avez tapé : ${cible.value}`;
});

Pourquoi découper

Un module est simplement un fichier .ts qui exporte certains éléments et en importe d’autres.

1. Portée isolée : ce qui n’est pas exporté est invisible dehors
2. Dépendances explicites : la ligne import dit de quoi le fichier a besoin

Une fonction non exportée correspond à une fonction static en C : l’isolement est la règle, l’exposition l’exception.

Exporter, importer

src/scripts/moduleMath.ts

export const pi = 3.14159;

export function additionner(a: number, b: number): number {
    return a + b;
}

src/scripts/app.ts

import { pi, additionner } from "./moduleMath.ts";

console.log(additionner(pi, 1));   // 4.14159

Les quatre formes

Conflit de noms : as

import { calculerRestants as restantsVacances } from "./moduleVacances.ts";
import { calculerRestants as restantsTravail } from "./moduleTravail.ts";

Un import déclare un nom dans votre fichier. Deux fois le même nom donne Duplicate identifier : le compilateur ne peut pas choisir à votre place.

À vous : par où commencer