Maîtriser string, number, boolean, void, any, unknown et annoter variables, paramètres et retours de fonctions
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Connaître tous les types primitifs
string, number, boolean, void, null, undefined, never
2. Comprendre any vs unknown
Le danger de any et l'alternative sécurisée
3. Annoter paramètres et retours
La convention professionnelle à respecter
4. Comprendre void, null, undefined, never
Les types spéciaux et leurs usages
Rappel rapide de J1
Pourquoi TypeScript, premier fichier .ts
Types primitifs : string, number, boolean
Les briques de base de TypeScript
Live coding : annoter des fonctions
Paramètres et retours de fonctions
void et le danger de any
Fonction qui ne retourne rien, désactiver TypeScript
unknown : l'alternative sécurisée à any
typeof pour le narrowing
Pourquoi TypeScript ? Comment ça fonctionne ?
TypeScript = JavaScript + Types
Les erreurs sont détectées AVANT l'exécution
✅ TypeScript ajoute des types statiques à JavaScript
✅ ts-node pour exécuter du .ts directement
✅ tsc pour compiler vers JavaScript
✅ strict: true dans tsconfig.json = obligatoire
💡 Aujourd'hui : on apprend à annoter correctement !
Les briques de base de TypeScript
3 types fondamentaux : string, number, boolean
Une chaîne de caractères, entre guillemets
const name: string = "Alice";
const email: string = "alice@example.com";
const message: string = `Bonjour ${name}!`;
📝 Guillemets simples, doubles, ou backticks (template literals)
Entiers, décimaux, hexadécimaux... tous sont number
const age: number = 25;
const price: number = 19.99;
const hex: number = 0xff; // 255 en hexadécimal
const binary: number = 0b1010; // 10 en binaire
💡 TypeScript n'a pas de type int ou float séparés — tout est number
Un type pour les conditions et les flags
const isLoggedIn: boolean = true;
const hasPermission: boolean = false;
const isAdult: boolean = age >= 18;
⚠️ Attention : boolean avec un 'e', pas bool
| Type | Valeurs | Exemple |
|---|---|---|
| string | Texte entre guillemets | "Hello" |
| number | Entiers, décimaux, hex... | 42, 3.14, 0xff |
| boolean | true ou false | true, false |
🎯 Ces 3 types couvrent 90% des cas de base !
Syntaxe : nomVariable: type = valeur
// Déclaration avec annotation explicite
const userName: string = "Bob";
const userAge: number = 30;
const isActive: boolean = true;
// Mais TypeScript peut inférer le type !
const userName = "Bob"; // TypeScript sait que c'est un string
💡 L'inference de type est puissante — pas besoin d'annoter chaque variable locale
Paramètres et retours de fonctions
C'est la convention professionnelle à respecter
Chaque paramètre DOIT avoir un type
❌ Sans annotation
function greet(name) {
return "Hello " + name;
}
name peut être n'importe quoi !
✅ Avec annotation
function greet(name: string) {
return "Hello " + name;
}
name DOIT être un string
Syntaxe : function name(): type
function add(a: number, b: number): number {
return a + b;
}
function greet(name: string): string {
return `Hello, ${name}!`;
}
📝 Le type de retour se place après les parenthèses, avant l'accolade
// Fonction qui calcule le prix TTC
function calculatePrice(price: number, tax: number): number {
return price * (1 + tax);
}
const total = calculatePrice(100, 0.2);
// total = 120 (et TypeScript sait que c'est un number)
✅ Paramètres ET retour annotés = fonction bien typée
❌ Erreur
function add(a, b) {
return a + b;
}
// Aucune annotation !
✅ Solution
function add(a: number, b: number): number {
return a + b;
}
// Params + retour annotés
⚠️ L'inference fonctionne pour le retour, mais TOUJOURS annoter les paramètres !
Une fonction qui ne retourne rien
void = "la fonction ne retourne aucune valeur"
Différent de undefined !
function logMessage(message: string): void {
console.log(message);
// Pas de return !
}
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
💡 void est souvent utilisé pour les fonctions qui font une action mais ne retournent pas de valeur
null
Valeur absente délibérément
const user: string | null = null;
undefined
Valeur pas encore définie
const data: string | undefined = undefined;
💡 Avec strict: true, TypeScript vous force à gérer ces cas
Une fonction qui ne termine jamais ou lance toujours une erreur
// Fonction qui lance toujours une erreur
function throwError(message: string): never {
throw new Error(message);
}
// Boucle infinie
function infiniteLoop(): never {
while (true) { }
}
⚠️ never = "cette fonction ne retourne JAMAIS"
| Type | Signification | Usage |
|---|---|---|
| void | Pas de retour | Fonction qui fait une action |
| undefined | Valeur absente | Variable non initialisée |
| never | Impossible | Erreur ou boucle infinie |
🎯 void = "pas de retour" ≠ undefined = "valeur absente"
Désactiver TypeScript = ne pas utiliser TypeScript
any = "Je ne veux pas de vérification de type"
C'est comme écrire du JavaScript !
let value: any = "Hello";
value = 42; // OK, any accepte tout
value = true; // OK
value.nonExistentMethod(); // OK pour TS, erreur au runtime !
❌ any désactive complètement TypeScript pour cette variable
Plus de vérification, plus d'autocompletion, plus de sécurité
unknown = "Je ne connais pas le type, mais je vais le vérifier"
let value: unknown = "Hello";
value.toUpperCase(); // ❌ Erreur TS !
// On DOIT vérifier le type avant d'utiliser
if (typeof value === "string") {
value.toUpperCase(); // ✅ OK !
}
🎯 unknown force à vérifier avec typeof avant d'utiliser
Vérifier le type avant d'utiliser une valeur unknown
function processValue(value: unknown) {
if (typeof value === "string") {
console.log("String: " + value.toUpperCase());
} else if (typeof value === "number") {
console.log("Number: " + value.toFixed(2));
} else {
console.log("Autre type");
}
}
✅ TypeScript sait que value est un string DANS le if
❌ any
• Accepte n'importe quelle valeur
• Aucune vérification
• Erreurs au runtime
• Désactive TypeScript
let v: any = "test";
v.foo(); // OK, mais crash!
✅ unknown
• Accepte n'importe quelle valeur
• Force la vérification typeof
• Erreurs à la compilation
• Reste sécurisé
let v: unknown = "test";
v.foo(); // ❌ Erreur TS
Les étudiants croient que any et unknown sont pareils... mais NON !
❌ Avec any
function parse(data: any) {
return data.name.toUpperCase();
}
// Crash si data.name n'existe pas!
✅ Avec unknown
function parse(data: unknown) {
if (typeof data === "object" && data !== null) {
// TypeScript sait que data est un objet
}
}
🤖 Inference
TypeScript devine le type
const name = "Alice";
// TypeScript sait : string
✅ Variables locales simples
📝 Annotation
On indique le type explicitement
function greet(name: string): string {
return `Hello ${name}`;
}
✅ Paramètres et retours
⚠️ Les étudiants veulent souvent tout annoter — expliquer que l'inference suffit souvent !
✅ TOUJOURS annoter les paramètres de fonction
C'est la convention professionnelle
✅ TOUJOURS annoter le retour de fonction
Pour la clarté et l'autocompletion
❌ JAMAIS utiliser any
C'est comme désactiver TypeScript
💡 Utiliser unknown si le type est vraiment inconnu
Et vérifier avec typeof avant d'utiliser
1️⃣ string, number, boolean = les 3 types primitifs de base
2️⃣ Toujours annoter les paramètres et retours de fonctions
3️⃣ void = fonction sans retour ≠ undefined = valeur absente
4️⃣ JAMAIS any — c'est désactiver TypeScript !
5️⃣ unknown + typeof = alternative sécurisée à any