Frontend Academy · Leçon

Types primitifs, unions et alias de types

Annotez les variables avec string, number, boolean et des tableaux. Créez des types union avec | et donnez-leur des noms lisibles grâce aux alias de types.

Leçon 2 sur 413 étapes

Types primitifs, unions et alias de types est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Annoter les variables

Ajoutez des annotations de type avec deux-points après le nom de la variable. TypeScript déduit les types lorsque c'est possible ; ajoutez des annotations explicites lorsque l'inférence n'est pas claire ou à des fins de documentation.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Types primitifs

Les types primitifs de TypeScript correspondent à ceux de JavaScript : string, number (sans distinction entre entiers et nombres à virgule flottante), boolean, null, undefined, symbol et bigint.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Tableaux

Indiquez le type d'un tableau avec Type[] ou le type générique Array<Type>. Les deux sont équivalents.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Types union : |

Les types union permettent à une variable de contenir l'un de plusieurs types. Utilisez l'opérateur barre verticale |. TypeScript affine le type à l'intérieur des conditions.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Types littéraux

Vous pouvez utiliser des valeurs littérales de type chaîne, numérique ou booléen comme types. Combinées à des unions, elles créent un ensemble fixe de valeurs autorisées, comparable à une énumération.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Alias de type : type

Le mot-clé type crée un alias de type, c'est-à-dire un nom réutilisable pour n'importe quel type. Les alias fonctionnent avec les types primitifs, les unions, les objets, les tuples et les types composés complexes.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Types d'objet avec type

Décrivez la structure des objets avec des alias de type. Rendez les propriétés facultatives avec ? et en lecture seule avec readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Types intersection : &

Combinez plusieurs types avec l'opérateur &. Le type obtenu possède toutes les propriétés des deux types. Cette technique est utile pour étendre des types.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

Le type quelconque — solution de secours

any désactive la vérification des types pour une valeur. Il est contagieux : les valeurs dérivées de any sont elles aussi de type any. Utilisez-le en dernier recours lors d'une migration, jamais comme solution à long terme.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

Le type inconnu — alternative sûre à tout type

unknown est l'équivalent sûr de any du point de vue du typage. Vous ne pouvez pas utiliser une valeur inconnue sans avoir d'abord affiné son type. Cela vous oblige à valider les données externes.

Tuples — tableaux de longueur fixe

Un tuple est un tableau de longueur fixe où chaque position possède un type connu.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Vérification rapide

Quelle fonctionnalité de TypeScript permet à une fonction d'accepter soit une chaîne de caractères, soit un nombre ?

Réponds-y dans la leçon interactive

Récapitulatif : types primitifs, unions et alias

Types primitifs : chaîne de caractères, nombre, booléen, valeur nulle et valeur non définie. Tableaux : Type[]. Types union : A | B. Types littéraux pour les ensembles de valeurs fixes. Alias de type pour les noms de types réutilisables. Propriétés facultatives avec ?. readonly pour les propriétés immuables. Préférez unknown à any pour les données externes.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Types primitifs, unions et alias de types » est-elle gratuite ?

Oui — le texte complet de « Types primitifs, unions et alias de types » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Types primitifs, unions et alias de types » ?

Annotez les variables avec string, number, boolean et des tableaux. Créez des types union avec | et donnez-leur des noms lisibles grâce aux alias de types. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Types primitifs, unions et alias de types » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Pourquoi TypeScript : les types détectent les bogues à la compilation
Types primitifs, unions et alias de types
Interfaces et types d’objets
Compiler TS et tsconfig.json

← Retour à Frontend Academy