TypeScript : du débutant au professionnel
Guide progressif TypeScript : des types basiques aux generics avancés, avec exemples concrets et bonnes pratiques.
TypeScript est un sur-ensemble type de JavaScript developpe par Microsoft qui ajoute un systeme de types statiques au langage. Depuis son adoption massive par l ecosysteme React (Next.js, Remix, Angular), TypeScript est devenu incontournable pour les projets professionnels. Le compilateur tsc detecte les erreurs a la compilation plutot qu a l execution, reduisant significativement les bugs en production.
La puissance de TypeScript reside dans son systeme de types avance qui va bien au-dela de la simple annotation de variables. Les generics, les types conditionels, les mapped types et les template literal types permettent de modeliser des contraintes metier complexes directement dans le systeme de types. Le resultat est un code plus sur, mieux documente et plus facile a refactorer.
Ce guide couvre les concepts fondamentaux et avances de TypeScript, des types de base aux patterns les plus sophistiques utilises dans les grandes codebases React. Chaque section illustre les concepts avec des exemples concrets et des cas d utilisation reels.
1. Types fondamentaux et annotations de base
TypeScript propose des types primitifs (string, number, boolean, null, undefined, bigint, symbol) et des types composites (Array<T>, [string, number] pour les tuples, Record<K, V> pour les dictionnaires). L inference de types permet souvent d omettre les annotations explicites : const name = "Lucas" infere automatiquement le type string. L annotation explicite est recommandee pour les parametres de fonctions et les valeurs de retour.
Les union types (string | number) et les literal types ('success' | 'error' | 'pending') permettent de definir des ensembles de valeurs valides. Le type never represente une valeur impossible et est utile pour l exhaustivite des switch. Le type unknown est l alternative sure a any : il force une verification de type avant utilisation, evitant les erreurs silencieuses.
Les enums TypeScript (enum Status { Active, Inactive }) sont debattus dans la communaute. L alternative recommandee est le pattern as const : const STATUS = { ACTIVE: 'active', INACTIVE: 'inactive' } as const avec type Status = typeof STATUS[keyof typeof STATUS]. Cette approche produit des types plus previsibles, un JavaScript plus leger et une meilleure tree-shakeability.
2. Interfaces vs types et modelisation des donnees
Les interfaces et les type aliases peuvent definir des structures d objets, mais avec des differences subtiles. Les interfaces supportent la declaration merging (plusieurs declarations du meme nom fusionnent automatiquement) et l heritage avec extends. Les type aliases supportent les unions, les intersections, les mapped types et les types conditionels. En regle generale, utilisez interface pour les objets et type pour tout le reste.
La modelisation des donnees API beneficie de types precis. Definissez interface User { id: number; name: string; email: string; role: 'admin' | 'user'; createdAt: string } pour representer un utilisateur. Utilisez Partial<User> pour les mises a jour partielles, Pick<User, 'id' | 'name'> pour les listes simplifiees, et Omit<User, 'createdAt'> pour les formulaires de creation.
L intersection de types (Type1 & Type2) combine deux types en un seul. C est utile pour composer des types a partir de mixins : type WithTimestamps = { createdAt: Date; updatedAt: Date } puis type UserWithTimestamps = User & WithTimestamps. Attention aux types impossibles : string & number donne never, et les proprietes conflictuelles dans les intersections d objets produisent des types inutilisables.
3. Generics et types parametres
Les generics permettent de creer des composants et des fonctions reutilisables avec une securite de type preservee. La fonction function first<T>(arr: T[]): T | undefined retourne le meme type que les elements du tableau passe en argument. Les contraintes avec extends limitent les types acceptes : function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] garantit que la cle existe sur l objet.
Les generics dans React sont essentiels pour les composants de liste et de formulaire. Un composant Select<T extends { id: string; label: string }> peut etre type-safe pour n importe quel type de donnees ayant id et label. Le hook useState<User | null>(null) type correctement l etat comme User | null, et les generics de React.FC<Props> typent les props du composant.
Les generics conditionels (T extends U ? X : Y) permettent des transformations de types dynamiques. Par exemple, type Flatten<T> = T extends Array<infer U> ? U : T extrait le type des elements d un tableau. Le mot-cle infer capture un type a l interieur d un pattern, permettant des extractions sophistiquees comme ReturnType<T> ou Parameters<T> qui sont des utility types natifs de TypeScript.
Besoin d’aide en Technologie ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Type guards et narrowing
Le type narrowing permet de raffiner le type d une variable dans un bloc conditionnel. TypeScript comprend nativement typeof (pour les primitifs), instanceof (pour les classes), l operateur in (pour les proprietes d objets) et les comparaisons strictes avec null/undefined. Apres un if (typeof x === 'string'), TypeScript sait que x est un string dans le bloc.
Les type guards personnalises utilisent la syntaxe parametre is Type en retour de fonction. La fonction function isUser(obj: unknown): obj is User { return typeof obj === 'object' && obj !== null && 'id' in obj && 'name' in obj } permet d utiliser un objet inconnu comme User apres verification. Ce pattern est fondamental pour valider les reponses API et les donnees externes.
Les discriminated unions combinent un champ discriminant avec le narrowing pour modeliser des etats exclusifs. type ApiResult = { status: 'success'; data: User } | { status: 'error'; message: string }. Un switch sur result.status permet a TypeScript de connaitre les proprietes disponibles dans chaque branche. Ce pattern remplace avantageusement les booleens isLoading/isError dans la gestion d etat.
5. TypeScript avec React et les frameworks modernes
Le typage des composants React utilise l inference plutot que React.FC qui est deconseille. Definissez les props comme interface, puis typez le composant directement : function Button({ label, onClick }: ButtonProps) { ... }. Les children se typent avec React.ReactNode, les refs avec React.RefObject<HTMLDivElement>, et les events avec React.MouseEvent<HTMLButtonElement>.
Les hooks se typent naturellement : useState<string>('') pour les etats simples, useRef<HTMLInputElement>(null) pour les references DOM, et useReducer avec un discriminated union pour les actions. Le hook useContext necessite une gestion de la valeur par defaut : createContext<User | undefined>(undefined) avec un hook wrapper useUser() qui throw si le contexte est undefined, garantissant le type User dans les consommateurs.
Avec Next.js App Router, les Server Components utilisent des types specifiques pour les props de page : { params: Promise<{ slug: string }>; searchParams: Promise<Record<string, string>> }. Les Server Actions retournent des types que le client consomme. La librairie zod avec z.infer<typeof schema> permet de deriver les types TypeScript directement depuis les schemas de validation, assurant la coherence entre validation runtime et types statiques.
Questions frequentes
Faut-il utiliser interface ou type en TypeScript ?
Utilisez interface pour definir la forme des objets et les contrats publics de vos API, car elles supportent l heritage et le declaration merging. Utilisez type pour les unions, les intersections, les types utilitaires et les transformations de types. En pratique, la difference est minime pour les objets simples ; choisissez une convention et tenez-la dans votre projet.
Comment typer correctement les reponses API en TypeScript ?
Definissez des interfaces pour chaque reponse API et utilisez un type guard ou une librairie de validation comme zod pour verifier les donnees a l execution. La combinaison z.infer<typeof userSchema> derive le type TypeScript depuis le schema Zod, garantissant que la validation runtime et le typage statique restent synchronises. N utilisez jamais as Type sans validation.
TypeScript ralentit-il le developpement ?
Le typage ajoute un surcout initial d environ 10 a 15% de temps de codage, mais reduit significativement le temps de debug et de refactoring. L autocompletion et la detection d erreurs en temps reel dans VS Code compensent largement ce surcout. Sur les projets de plus de 3 mois, TypeScript accelere nettement le developpement global.
Comment migrer progressivement un projet JavaScript vers TypeScript ?
Renommez les fichiers de .js en .ts un par un, en commencant par les utilitaires et les types partages. Configurez tsconfig.json avec strict: false initialement, puis activez les options strictes progressivement. Le type any sert de soupape temporaire pendant la migration. Visez un passage a strict: true en quelques semaines.
Les generics sont-ils necessaires pour les projets React courants ?
Oui, les generics apparaissent naturellement dans les hooks (useState<T>, useReducer), les composants reutilisables (List<T>, Select<T>) et les fonctions utilitaires. Comprendre les generics de base suffit pour 90% des cas. Les types conditionels avances et les mapped types sont utiles pour les auteurs de librairies mais rarement necessaires dans le code applicatif.
Guides complementaires
Next.js 14 : guide complet du App Router en français
Guide complet du App Router Next.js 14 en français : layouts, server components, data fetching et déploiement.
TechnologieTailwind CSS : guide complet et bonnes pratiques 2025
Guide complet Tailwind CSS : configuration, responsive design, dark mode, composants réutilisables et bonnes pratiques.
TechnologieAPI REST vs GraphQL : quel choix pour votre projet
Comparatif détaillé REST vs GraphQL : performances, flexibilité, sécurité et cas d'usage pour choisir votre API.
Outils gratuits recommandes
Lancez votre projet technologie
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.