comment-typer-en-typescript
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ères
  • number : les nombres
  • bigint : les entiers de grande taille
  • boolean : les booléens
  • undefined : la valeur non définie
  • null : la valeur nulle
  • symbol : 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 :

Copier

💡 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 :

Copier

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 :

schema-type-typescript

Maintenant qu’on a créé notre type Voiture on aimerait créer une constante de type Voiture 🚗

Copier

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

Copier

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à :

toast-notifications

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 ? 😁

Les types littéraux

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.

formation-wordpress-gratuite-pas-cher