Types de base et fonctions

Ce que tu vas apprendre

• Annoter une variable avec string, number, boolean et les tableaux.
• Laisser TypeScript deviner le type grâce à l'inférence.
• Typer les paramètres et le retour d'une fonction.

Annoter une variable

Voici trois variables pour une recette.

const nom: string = "Gratin dauphinois"
const personnes: number = 4
const vegetarien: boolean = false

Après les deux-points, tu écris le type. Une telle mention s'appelle une annotation de type.

Les trois types de base sont string pour le texte, number pour tous les nombres (entiers ou décimaux) et boolean pour true ou false.

Les types s'écrivent en minuscules. String avec une majuscule existe aussi, mais ce n'est pas celui qu'on utilise.

Les tableaux

Pour une liste de valeurs du même type, ajoute [] après le type.

const ingredients: string[] = ["pommes de terre", "crème", "ail"]
const notes: number[] = [4, 5, 3]

string[] se lit « un tableau de textes ». Si tu essaies d'ajouter un nombre à ingredients, TypeScript refuse.

L'inférence : TypeScript devine

Tu n'as pas besoin d'annoter chaque variable. Quand tu donnes une valeur de départ, TypeScript en déduit le type. C'est l'inférence de type.

const nom = "Gratin dauphinois"
let personnes = 4

personnes = "six" // Erreur

personnes est devenu un number dès sa création. L'affectation d'un texte est donc refusée.

Passe la souris sur un nom dans ton éditeur : le type déduit s'affiche.

Annoter ou laisser deviner

Une règle simple pour débuter :

Un code trop annoté devient pénible à lire. Annote là où TypeScript ne peut pas deviner.

let titre: string
titre = "Tarte aux pommes"

Typer une fonction

Les paramètres se typent un par un. Le type de retour se place après les parenthèses.

function duree(preparation: number, cuisson: number): number {
  return preparation + cuisson
}

duree(15, 45) // 60
duree(15)     // Erreur : il manque un argument

TypeScript vérifie le nombre d'arguments et leur type. En JavaScript, un argument oublié donnerait NaN sans prévenir.

Le type de retour peut souvent être omis : TypeScript le déduit de l'instruction return.

Les fonctions fléchées

La syntaxe est la même pour une fonction fléchée.

const prixParPart = (prix: number, parts: number): number => prix / parts

Chaque paramètre garde son annotation entre les parenthèses. Le : number avant la flèche est le type de retour.

Paramètre optionnel et valeur par défaut

Un point d'interrogation rend un paramètre facultatif.

function saluer(nom: string, titre?: string) {
  return titre ? `${titre} ${nom}` : nom
}

saluer("Marie")
saluer("Marie", "Chef")

Dans la fonction, titre vaut string | undefined. On reviendra sur cette notation avec les unions.

Une valeur par défaut est plus simple. Le type est alors déduit :

function portions(personnes = 4) {
  return personnes * 150
}

Quand la fonction ne renvoie rien

Une fonction qui affiche quelque chose sans rien renvoyer a pour type de retour void.

function afficherRecette(nom: string): void {
  console.log(`Recette : ${nom}`)
}

void signifie « pas de valeur utile ». Là encore, tu peux l'omettre : TypeScript le déduit.

Le piège de any

any désigne un type qui désactive toute vérification. Avec lui, tu retrouves le comportement de JavaScript.

let valeur: any = "texte"
valeur.nimporteQuoi() // Aucune erreur, plantage à l'exécution

La documentation recommande d'activer l'option noImplicitAny dans la configuration, qui transforme chaque any involontaire en erreur. Évite any : un meilleur outil, unknown, arrive dans un prochain cours.

À retenir

• Les types de base sont string, number et boolean, écrits en minuscules.
• string[] désigne un tableau de textes.
• L'inférence déduit le type d'une variable initialisée : inutile de tout annoter.
• Les paramètres de fonction s'annotent toujours ; le retour peut être déduit.
• ? rend un paramètre facultatif, void indique l'absence de valeur renvoyée.
• Évite any : il désactive la vérification.