JavaScript et TypeScript, pas à pas
Dans quelques semaines, vous saurez lire et écrire à la main le code d'une vraie application mobile. Ce cours est votre rampe de lancement.
Vous connaissez déjà un peu de HTML, de SQL et de PHP : c'est largement suffisant pour commencer. JavaScript est le langage que tous les navigateurs comprennent, mais aussi celui qui fait tourner des applications mobiles (Android, iOS) avec Expo. TypeScript est le même langage, avec un « correcteur orthographique » en plus : il repère vos erreurs avant même que le programme ne démarre.
Ici, les deux sont enseignés ensemble, dans une seule progression, avec des petites étapes que vous pouvez toutes réussir.
Ce que vous saurez faire à la fin
Voici un petit morceau de code, comme on en écrit tous les jours dans une application Expo. Aujourd'hui, il ressemble à du chinois. À la fin du cours, vous saurez le lire ligne par ligne et en écrire de semblables :
type Question = { id: number; enonce: string; niveau: 1 | 2 | 3 };
export default function ListeQuestions() {
const [questions, setQuestions] = useState<Question[]>([]);
const [erreur, setErreur] = useState<string | null>(null);
useEffect(() => {
const controleur = new AbortController();
async function charger() {
try {
const reponse = await fetch("https://exemple.fr/questions", { signal: controleur.signal });
if (!reponse.ok) throw new Error("Réponse refusée par le serveur");
setQuestions(await reponse.json());
} catch (e) {
if (!controleur.signal.aborted) setErreur("Impossible de charger les questions");
}
}
charger();
return () => controleur.abort();
}, []);
return questions.map(({ id, enonce }) => <Text key={id}>{enonce}</Text>);
}
Dans ce code : une fonction, un état, un effet, du code asynchrone, une gestion d'erreur, une annulation de requête, une destructuration et du TypeScript. Chaque notion est expliquée séparément, une par une, avant de se retrouver ici dans la dernière partie.
Important : on n'étudie pas tout JavaScript
JavaScript est un langage immense. Ce cours n'a pas pour but de tout vous apprendre : il retient uniquement les notions essentielles pour être capable de coder à la main, sans IA, un projet Expo (celui de la série Expo).
| Ce que le cours étudie | Ce que le cours laisse volontairement de côté |
|---|---|
| variables, types, conditions, boucles | var, le hoisting, this, les prototypes |
| fonctions, fonctions fléchées, fermetures | générateurs, Proxy, Symbol, expressions régulières avancées |
objets, tableaux, map, filter, destructuration, ... | la programmation orientée objet (classes) en JavaScript |
modules, erreurs et try/catch | le DOM et les événements du navigateur (voir le cours JavaScript dans le navigateur) |
promesses, async/await, requêtes réseau fiables | les serveurs Node.js avancés |
TypeScript : types, unions, fonctions, Promise | TypeScript avancé (génériques écrits à la main, types utilitaires, enum) |
JSX, useState, useEffect (aperçu avant Expo) | tous les autres hooks de React |
Une IA écrit du code très vite, mais elle se trompe et vous seul pouvez le détecter. Si vous ne comprenez pas le code, vous ne pouvez ni le vérifier, ni le corriger, ni le faire évoluer. Apprendre à coder à la main, c'est apprendre à diriger l'IA plutôt que de la subir. Une fois ces bases acquises, l'IA deviendra un excellent assistant.
Le fil conducteur : un quiz sur la cybersécurité
Tous les exemples du cours tournent autour d'un quiz de cybersécurité : des questions, des réponses, un score,
un classement. C'est exactement le projet que vous réaliserez dans la série Expo. Les mots (enonce, reponses,
estCorrecte, niveau...) seront donc déjà familiers le jour où vous créerez l'application.
| Partie | Vous y apprenez à... | Séances |
|---|---|---|
| 1. Premiers pas | exécuter du code, stocker des valeurs, décider, répéter | 3 |
| 2. Les fonctions | découper un programme en petites briques réutilisables | 2 |
| 3. Objets et tableaux | représenter des données et les transformer | 4 |
| 4. Un code fiable | ranger son code, comprendre les fermetures et gérer les erreurs | 3 |
| 5. L'asynchrone | attendre un résultat sans bloquer, et sans bug | 4 |
| 6. TypeScript | faire vérifier son code avant de l'exécuter | 3 |
| 7. Passerelle vers Expo | découvrir composants, useState et useEffect | 4 |
PHP / JavaScript
| Vous savez déjà (PHP) | En JavaScript |
|---|---|
$nom = "Alice"; | const nom = "Alice"; (pas de $) |
echo "Bonjour $nom"; | console.log(`Bonjour ${nom}`); |
if (...) { } else { } | if (...) { } else { } |
for, while | for, while |
foreach ($liste as $x) | for (const x of liste) |
[1, 2, 3] et ["nom" => "Alice"] | [1, 2, 3] et { nom: "Alice" } |
function addition($a, $b) | function addition(a, b) |
try { } catch (Exception $e) { } | try { } catch (e) { } |
== (comparaison souple) | utilisez toujours === |
Quelques conseils
- Tapez le code vous-même, ne le copiez-collez pas : vos doigts apprennent plus vite que vos yeux.
- Lancez le code après chaque modification. Un programme qui fonctionne par petits pas est un programme que vous comprenez.
- Une erreur n'est pas un échec : c'est un message qui vous indique où chercher. Apprenez à la lire dès la première séance.
- Chaque séance se termine par un TP guidé : ne le sautez pas, c'est là que les notions s'ancrent.
Prérequis
- un ordinateur avec Node.js (version 22.13 ou plus récente) et VS Code ;
- quelques notions de HTML, de SQL et de PHP (variables,
if, boucles, fonctions) ; - l'envie d'essayer, de se tromper et de recommencer.
Et après ce cours sur JavaScript
Une fois ce cours terminé, vous serez prêts pour la série Expo : un générateur de quiz Cyber, où vous construirez l'application complète.