BaliseTonSite

Types de base

Les briques fondamentales du système de types.

2.1Les types primitifs

TypeScript a les mêmes types primitifs que JavaScript, mais tu peux les déclarer explicitement :

TypeScripttypescript
// String : texte
let nom: string = "Alice"
let message: string = `Bonjour ${nom}`

// Number : nombres (entiers et décimaux)
let age: number = 25
let prix: number = 19.99
let hex: number = 0xff

// Boolean : vrai ou faux
let estConnecte: boolean = true
let aAccepte: boolean = false

2.2L'inférence de type

TypeScript déduit souvent le type automatiquement. Tu n'as pas besoin de tout annoter :

TypeScripttypescript
// TypeScript infère automatiquement
let ville = "Paris"          // type: string (inféré)
let population = 2_161_000   // type: number (inféré)
let estCapitale = true       // type: boolean (inféré)

// Inutile d'écrire :
let ville: string = "Paris"  // Redondant, TS le sait déjà

// L'inférence fonctionne aussi avec les fonctions
let double = (n: number) => n * 2  // retour inféré: number

2.3Tableaux (Arrays)

Deux syntaxes pour typer un tableau :

TypeScripttypescript
// Syntaxe 1 : type[]
let fruits: string[] = ["pomme", "banane", "cerise"]
let notes: number[] = [18, 15, 20, 12]

// Syntaxe 2 : Array<type> (générique)
let couleurs: Array<string> = ["rouge", "bleu", "vert"]

// TypeScript protège le contenu
fruits.push("mangue")    // ✅
// fruits.push(42)        // ❌ Argument de type 'number' non assignable à 'string'

// Tableau vide typé (important !)
let scores: number[] = []
scores.push(100)          // ✅
// scores.push("cent")    // ❌

2.4Tuples

Un tuple est un tableau avec un nombre fixe d'éléments et des types définis pour chaque position :

TypeScripttypescript
// Tuple : [type1, type2, ...]
let coordonnees: [number, number] = [48.8566, 2.3522]
let utilisateur: [string, number] = ["Alice", 25]

// Chaque position a son type
utilisateur[0].toUpperCase()  // ✅ C'est un string
utilisateur[1].toFixed(2)     // ✅ C'est un number

// Tuple nommé (plus lisible, TS 4+)
type Point = [x: number, y: number]
let position: Point = [10, 20]

// Destructuring
const [nom, age] = utilisateur
// nom est string, age est number, et TypeScript le sait !

2.5Enums

Les enums définissent un ensemble de constantes nommées. Très utile pour représenter des états, des rôles, des directions :

TypeScripttypescript
// Enum numérique (commence à 0 par défaut)
enum Direction {
  Haut,      // 0
  Bas,       // 1
  Gauche,    // 2
  Droite     // 3
}

let mouvement: Direction = Direction.Haut

// Enum avec des strings (recommandé)
enum Role {
  Admin = "ADMIN",
  Editeur = "EDITEUR",
  Lecteur = "LECTEUR"
}

let monRole: Role = Role.Admin
console.log(monRole)  // "ADMIN"

// Utilisation dans une condition
if (monRole === Role.Admin) {
  console.log("Accès total")
}

2.6any, unknown, void, never

TypeScript a des types spéciaux pour les cas particuliers :

TypeScripttypescript
// any : désactive le typage (à éviter !)
let nimporteQuoi: any = 42
nimporteQuoi = "texte"    // Pas d'erreur
nimporteQuoi.methode()    // Pas d'erreur... mais crash au runtime

// unknown : "je ne sais pas encore" (sûr)
let valeur: unknown = "bonjour"
// valeur.toUpperCase()    // ❌ Erreur ! Tu dois vérifier d'abord
if (typeof valeur === "string") {
  valeur.toUpperCase()     // ✅ Maintenant TypeScript sait
}

// void : fonction qui ne retourne rien
function afficherMessage(msg: string): void {
  console.log(msg)
  // pas de return
}

// never : fonction qui ne termine jamais
function erreurFatale(msg: string): never {
  throw new Error(msg)    // Ne retourne jamais
}

2.7null et undefined

TypeScripttypescript
// En mode strict (strictNullChecks: true)
let nom: string = "Alice"
// nom = null           // ❌ Erreur !

// Pour autoriser null, utilise l'union
let pseudo: string | null = "CoolDev"
pseudo = null            // ✅ Autorisé

// Vérification avant utilisation
if (pseudo !== null) {
  console.log(pseudo.toUpperCase())  // ✅ Sûr
}

// Optional chaining (chaînage optionnel)
console.log(pseudo?.toUpperCase())   // ✅ undefined si null

// Nullish coalescing (valeur par défaut)
let affichage = pseudo ?? "Anonyme"  // "Anonyme" si null/undefined

2.8Objets typés

TypeScripttypescript
// Typer un objet directement
let utilisateur: { nom: string; age: number; actif: boolean } = {
  nom: "Alice",
  age: 25,
  actif: true
}

// Propriété optionnelle avec "?"
let profil: { nom: string; bio?: string } = {
  nom: "Bob"
  // bio est optionnel, pas d'erreur
}

// Propriété en lecture seule
let config: { readonly apiKey: string; version: number } = {
  apiKey: "abc123",
  version: 1
}
// config.apiKey = "xyz"  // ❌ Erreur : propriété en lecture seule

Verifie tes acquis

3 questions pour valider ce chapitre

1. Quelle est la difference entre any et unknown ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi