Antisèche TypeScript
Dernière mise à jour
Types de base
Les types primitifs et comment annoter les variables.
| Opération | Syntaxe |
|---|---|
| Chaîne (string) | let name: string = "Ada"; |
| Nombre | let age: number = 25; |
| Booléen | let ok: boolean = true; |
| Tableau de T | let xs: number[] = [1, 2, 3]; |
| Tableau générique | let xs: Array<string> = []; |
| Tuple | let pair: [string, number] = ["a", 1]; |
| Any (désactive le typage) | let x: any = 1; |
| Unknown (any sécurisé) | let x: unknown = JSON.parse(s); |
| Void (sans retour) | function log(): void { … } |
| Never (ne retourne jamais) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Inférence et annotations de type
Quand laisser TS inférer et quand annoter.
| Opération | Syntaxe |
|---|---|
| Inféré depuis la valeur | let count = 0; // number |
| Annotation explicite | let count: number = 0; |
| Paramètre de fonction | function add(a: number, b: number) { … } |
| Type de retour | function add(a: number, b: number): number { … } |
| Fonction fléchée | const sq = (x: number): number => x * x; |
| Assertion de type | const el = input as HTMLInputElement; |
| Assertion const (literal) | const dirs = ["up", "down"] as const; |
| Assertion non-null | el!.focus(); |
Interfaces
Décris la forme d'un objet.
| Opération | Syntaxe |
|---|---|
| Déclarer | interface User { id: number; name: string; } |
| Propriété optionnelle | interface User { age?: number; } |
| Propriété readonly | interface User { readonly id: number; } |
| Signature de méthode | interface Logger { log(msg: string): void; } |
| Étendre une autre interface | interface Admin extends User { role: string; } |
| Signature d'index | interface Map { [key: string]: number; } |
| Implémenter dans une classe | class Db implements Logger { … } |
Alias de type et unions
Nomme un type et combine des types avec | et &.
| Opération | Syntaxe |
|---|---|
| Alias de type | type ID = string | number; |
| Alias d'objet | type User = { id: number; name: string }; |
| Type union | type Status = "idle" | "loading" | "done"; |
| Type intersection | type Admin = User & { role: string }; |
| Type littéral | type Yes = "yes"; |
| Nullable | type Maybe<T> = T | null | undefined; |
| Alias de fonction | type Handler = (e: Event) => void; |
Fonctions
Paramètres typés, retours et surcharges.
| Opération | Syntaxe |
|---|---|
| Paramètre optionnel | function greet(name?: string) { … } |
| Paramètre par défaut | function greet(name = "friend") { … } |
| Paramètres rest | function sum(...ns: number[]): number { … } |
| Type de fonction | let fn: (a: number) => number; |
| Interface appelable | interface Fn { (x: number): number; } |
| Signatures de surcharge | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Retour void ignoré | const cb: () => void = () => 42; // ok |
Classes
Classes avec modificateurs d'accès et propriétés de paramètre.
| Opération | Syntaxe |
|---|---|
| Déclarer une classe | class User { name: string; } |
| Constructeur | constructor(name: string) { this.name = name; } |
| Propriété de paramètre | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Champ readonly | readonly id: number; |
| Membre statique | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Héritage | class Admin extends User { … } |
| Classe abstraite | abstract class Shape { abstract area(): number; } |
Génériques
Types réutilisables paramétrés par d'autres types.
| Opération | Syntaxe |
|---|---|
| Fonction générique | function id<T>(x: T): T { return x; } |
| Appeler avec type explicite | id<string>("hi"); |
| Interface générique | interface Box<T> { value: T; } |
| Alias générique | type Pair<A, B> = [A, B]; |
| Classe générique | class Stack<T> { items: T[] = []; } |
| Contrainte avec extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| Paramètre de type par défaut | interface Box<T = string> { value: T; } |
| Opérateur keyof | type K = keyof User; // "id" | "name" |
| Accès par index | type Name = User["name"]; |
Narrowing
Réduire une union à un seul type à l'exécution.
| Opération | Syntaxe |
|---|---|
| Vérification typeof | if (typeof x === "string") { … } |
| Vérification instanceof | if (e instanceof Error) { … } |
| Opérateur in | if ("name" in obj) { … } |
| Narrowing par égalité | if (status === "done") { … } |
| Par véracité | if (value) { … } |
| Type guard personnalisé | function isUser(x: any): x is User { return "id" in x; } |
| Union discriminée | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| Exhaustivité avec never | const _: never = shape; |
Enums
Ensembles nommés de constantes.
| Opération | Syntaxe |
|---|---|
| Enum numérique | enum Direction { Up, Down, Left, Right } |
| Enum de chaînes | enum Status { Idle = "IDLE", Done = "DONE" } |
| Utiliser une valeur | let d: Direction = Direction.Up; |
| Const enum (inliné) | const enum Color { Red, Green, Blue } |
| Union de littéraux (moderne) | type Status = "idle" | "done"; |
Utility types
Helpers intégrés qui transforment des types existants.
| Opération | Syntaxe |
|---|---|
| Toutes les props optionnelles | Partial<User> |
| Toutes les props requises | Required<User> |
| Toutes les props readonly | Readonly<User> |
| Sélectionner un sous-ensemble de clés | Pick<User, "id" | "name"> |
| Omettre une ou plusieurs clés | Omit<User, "password"> |
| Objet avec clés données | Record<string, number> |
| Exclure d'une union | Exclude<"a" | "b" | "c", "a"> |
| Ne garder qu'une union | Extract<"a" | "b", "a" | "c"> |
| Retirer null / undefined | NonNullable<string | null> |
| Type de retour de fonction | ReturnType<typeof fn> |
| Tuple des paramètres | Parameters<typeof fn> |
| Type de promesse résolue | Awaited<Promise<string>> |
Modules
Importer et exporter entre fichiers.
| Opération | Syntaxe |
|---|---|
| Export nommé | export function add(a: number, b: number) { … } |
| Export par défaut | export default class User { … } |
| Ré-exporter | export { User } from "./user"; |
| Import nommé | import { add } from "./math"; |
| Import par défaut | import User from "./user"; |
| Import de type uniquement | import type { User } from "./user"; |
| Tout importer | import * as math from "./math"; |
| Référence triple-slash | /// <reference types="node" /> |
tsconfig essentiel
Les flags du compilateur à connaître.
| Option | Effet |
|---|---|
"strict": true | Active toutes les vérifications strictes (recommandé). |
"target": "ES2022" | Version JavaScript que tsc émet. |
"module": "ESNext" | Système de modules dans la sortie. |
"moduleResolution": "bundler" | Résout les modules comme les bundlers modernes. |
"jsx": "react-jsx" | Active JSX pour React 17+. |
"esModuleInterop": true | Imports par défaut plus propres depuis CommonJS. |
"skipLibCheck": true | Saute le typage de node_modules (build plus rapide). |
"noEmit": true | Vérification de types uniquement — le bundler émet la sortie. |
La syntaxe TypeScript que tu utilises le plus, sur une seule page. Cette antisèche TypeScript est une référence rapide pour le quotidien en TS : types de base, interfaces, alias de type, génériques, unions, narrowing et les utility types intégrés.
Tout ici est du TypeScript standard qui se compile avec tsc et tourne partout où le JavaScript moderne fonctionne. Copie ce dont tu as besoin ou essaie n'importe quel extrait en direct dans le playground TypeScript — rien à installer.
FAQ antisèche TypeScript
Cette antisèche TypeScript est-elle gratuite ?
Oui. Cette antisèche TypeScript est entièrement gratuite, sans inscription. Mets-la en favori et reviens quand tu as besoin de consulter un type, une interface ou un utility type.
Quelle est la différence entre une interface et un alias de type ?
Les deux peuvent décrire la forme d'un objet et, dans la plupart des cas du quotidien, sont interchangeables. Les interfaces peuvent être rouvertes et étendues entre fichiers (declaration merging), ce qui est utile pour les types de bibliothèques. Les alias de type peuvent nommer des unions, intersections, tuples et mapped types — des formes que tu ne peux pas exprimer avec
interface. Règle courante : utilise interface pour les formes d'objet publiques et type pour les unions, tuples et types calculés.Quelle est la différence entre any et unknown ?
any désactive complètement la vérification de types — le compilateur te laisse tout faire avec. unknown est sûr : tu dois le restreindre (avec typeof, instanceof ou un type guard) avant de l'utiliser. Préfère unknown pour les valeurs venant de sources externes comme JSON.parse ou fetch — il t'oblige à valider avant utilisation.Dois-je apprendre JavaScript avant TypeScript ?
Oui — TypeScript est du JavaScript avec un système de types par-dessus, donc toute compétence JS est réutilisée. Si tu construis encore les bases JS (tableaux, objets, async/await), l'antisèche JavaScript est un bon point de départ et le cours JavaScript gratuit de Coddy couvre les mêmes notions de façon interactive.
Puis-je pratiquer TypeScript en ligne ?
Oui. Ouvre le playground TypeScript pour exécuter n'importe quel extrait de cette antisèche dans ton navigateur — rien à installer. Quand tu veux de la structure, apprends depuis le landing JavaScript et applique les types de cette page par-dessus.
Ressources connexes
Plus d'aide-mémoires
