Types de base TypeScript : primitives, tableaux, objets

Les types sont au coeur du langage TypeScript (ils ont d’ailleurs donné son nom au langage). Comment sont-ils utilisés ?

Introduction

Rappelons d’abord que les types sont facultatifs.

Ils permettent de spécifier le type d’une variable en l’annotant avec la syntaxe :

variable: type

Par exemple :

let age: number;

Types de base (number, boolean, et string)

Voici quelques exemples :

let age: number;
let isCustomer: boolean;
let name: string = 'Vince';  // Typage + Affectation de valeur

Comme on le voit, les valeurs primitives ont leurs propres types : number, boolean, et string. On peut également typer une variable ET lui assigner une valeur en même temps (c’est le cas de name dans l’exemple).

Une fois typée, une variable ne peut recevoir que des valeurs du type indiqué. Si une valeur d’un autre type est utilisée, le compilateur TypeScript générera une erreur (et votre IDE aussi, s’il supporte TypeScript).

let name: string;
name = true;  // ERREUR, `name` doit contenir une string

Quand on n’est pas certain du type, le type any permet d’autoriser tous les types :

let notSure: any = 4;  // d'abord, un nombre
notSure = "ensuite, une chaîne";
notSure = false;  // finalement, un booléen

Avec any, on retrouve donc le même comportement de “typage dynamique” qu’on a en JavaScript classique.

Notez qu’en TypeScript, les variables sont toujours typées, même en l’absence de type explicite. Le compilateur TypeScript utilise en effet l’inférence de type pour déduire le type d’une variable d’après la valeur initiale qui lui est affectée :

const isAdmin = true;  // isAdmin a le type "boolean"

// Équivalent à :
const isAdmin: boolean = true;

Typer les arguments et le retour d’une fonction

Les types peuvent également être utilisés dans une déclaration d’une fonction, pour typer les arguments de la fonction et sa valeur de retour :

function isAdmin(username: string): boolean {
  // Ici, code qui teste si l'utilisateur `username`
  // est admin ou pas
  return TrueOrFalse;
}

Dans cet exemple, la fonction isAdmin accepte un paramètre username qui doit être une chaîne de caractères et elle doit renvoyer true ou false.

Lorsqu’une fonction ne renvoie rien, on peut indiquer le type void :

function warnUser(): void {
  alert("Attention ! Angular rend accro.");
}

Typer un tableau

Les tableaux peuvent être typés avec l’une de ces deux syntaxes (les deux sont équivalentes) :

let tableau: type[];
let tableau: Array<type>;

Par exemple :

// Syntaxe 1
const list: number[] = [1, 2, 3];

// Syntaxe 2
const list: Array<number> = [1, 2, 3];

Typer un objet

On peut décrire la forme qu’un objet doit posséder avec une syntaxe similaire à celle d’un objet littéral. Mais au lieu de définir les paires cle: valeur de l’objet, on définit les paires cle: type.

// Notez bien la syntaxe "let obj: TYPE"
// Je n'ai pas assigné de valeur à `navItem`, qui vaut undefined
let navItem: {
  path: string;
  label: string;
};

Ici, la variable navItem devra contenir un objet avec les propriétés path et label, et ces deux propriétés devront être de type string.

Voici les valeurs qu’on pourrait assigner — ou pas — à la variable navItem :

// OK
navItem = {
  path: '/home',
  label: 'Accueil'
};

// ERREUR, car on ne peut pas assigner un objet littéral contenant des propriétés en plus (ici, `isActive`)
navItem = {
  path: '/home',
  label: 'Accueil',
  isActive: true
};

// ERREUR, car `label` n'est pas une string
navItem = {
  path: '/home',
  label: true     // ERROR: Type 'boolean' is not assignable to type 'string'.
};

// ERREUR, car `label` est manquant
navItem = {
  path: '/home'   // ERROR: Property 'label' is missing in type '{ path: string; }'.
};

On peut combiner le type d’objet avec la syntaxe tableau :

let navItems: {
  path: string;
  label: string;
}[];  // <-- Notez les [ ]

Dans cet exemple, navItems doit contenir un tableau d’objets qui ont chacun une propriété path et une propriété label.

Informations

Tags : typescript

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne