
Sommaire
Dans cet article nous allons voir comment typer en typescript, les différents typages ainsi que les types primitifs et littéraux.
Les types primitifs
Ce sont les types élémentaires les plus basiques. Une primitive est une data qui n’est pas un objet et qui n’a pas de méthodes associées ou de propriétés.
Documentation sur les types primitifs
Voici la liste de tous les types primitifs :
string
: les chaînes de caractèresnumber
: les nombresbigint
: les entiers de grande tailleboolean
: les booléensundefined
: la valeur non définienull
: la valeur nullesymbol
: les symboles
Ces types primitifs vont te servir à :
- Typer les paramètres de fonction
- Créer d’autres types
Typer une fonction
C’est un des fondements de Typescript. C’est limite un des buts principaux de typescript : typer les fonctions.
Généralement on va typer les paramètres mais on peut aussi typer le type de retour.
Je te montre comment faire les deux :
💡 Note : tu n’es pas obligé de typer le type de retour.
D’ailleurs je ne te recommande pas de typer le type de retour. Pour faire simple, Typescript est assez intelligent pour gérer ça lui même sans que tu le types toi-même. En gros, tu n’as pas besoin de lui dire ce qu’il sait déjà. Donc pas besoin de rajouter du code “inutile”.
Création d’un type
Créons par exemple un type Voiture :
Comme tu peux voir, pour créer un nouveau type il suffit d’utiliser le mot clé type
puis de l’assigner avec des types primitifs.
On vient de créer un type “Objet”. On verra les autres sortes de types juste après.
Voici un schéma pour bien t’expliquer :
Maintenant qu’on a créé notre type Voiture on aimerait créer une constante de type Voiture 🚗
Comme tu peux le voir, decapotable
est optionnel donc je peux ne pas le mettre si je veux. Je ne l’est pas mis dans ma constante mercedes
et il n’y a pas eu d’erreur.
Plus haut, je t’ai menti 🤥
Pour créer un nouveau type tu n’es pas obligé d’utiliser QUE des types primitifs.
Les différentes sortes de types
Ici on a créé un nouveau type Id qui est juste un type number pour le mettre dans l’id de notre type objet.
🤔 « Mais pourquoi on utilise pas directement number dans l’id de Wizard ? »
Comme ça tu veux dire ?
Copier
Imagine un code plus grand :
Copier
Aujourd’hui mes Ids sont des number, mais demain, si je veux que mes Ids soient des number OU des string ? Ben je suis obligé de tout changer.
Alors que si j’avais créé un bon type Id number j’aurais juste eu à rajouter ça :
Copier
Et ça l’aurait changé de partout !
⚠️ Ça ressemble à un OU logique mais il n’y a qu’une seule barre pour le union.
Un union : |
Un OU logique : ||
Documentation: Union Type
Alors bien sûr j’aurais des erreurs par-ci par-là mais justement c’est le but de TypeScript : de ne pas avoir peur de modifier son code.
En Javascript j’aurais pas eu d’erreur visible mais j’aurais eu des erreurs au cours de l’utilisation de mon appli web. Donc en Javascript c’est à moi de penser à tout et de ne rien oublier.
Tu commences à comprendre pourquoi les entreprises passent sur du TypeScript ? C’est beaucoup plus maintenable sur le long terme.
Ah et d’ailleurs félicitations. Tu viens d’apprendre un nouveau type. Le type Union 🤝🎉
Bon allez il serait temps de voir tous les types possibles.
Copier
En fait tu peux quasi faire tout ce que tu veux. Le but d’un type c’est de définir un type de données précis.
Les types littéraux
Les types littéraux représentent un ensemble de valeurs limitées. Je le mets au pluriel mais en sois tu pourrais avoir un ensemble d’une seule valeur… (Mais ce serait pas vraiment utile)
Copier
Bon ok j’ai peut-être un peu forcé avec mon âge magique.
🤔 « Comment ça peut vraiment être utile dans une application web ? »
Imaginons qu’on créé une toast de notification comme celle là :
Ici on est d’accord qu’il y a que 4 états possible ?
Copier
De cette manière le type ToastColor peut avoir seulement les 4 couleurs : rouge, orange, bleu et vert.
C’est bon c’est plus clair maintenant ? 😁
Gagner sa vie avec WordPress
Dans cette formation, je vais t'apprendre à te lancer et à vivre de la création de site web avec WordPress.
