TypeScript est de plus en plus populaire. Le State of JS montre qu’il est la technologie la plus adoptée en 2020. Cet article vise à lister quelques bonnes pratiques à mettre en place lors de l’utilisation de TypeScript.


  • Configuration stricte

Pour tirer un maximum d’avantages de TypeScript, on peut le configurer en mode strict.

Dans tsconfig.json : 

{
    "forceConsitentCasingInFileNames": true,
    "noImplicitReturns": true,
    "strict": true,
    "noUnusedLocals": true
 }


  • Ne pas utiliser any

Il est possible de rajouter des options dans le fichier tsconfig.json pour l’interdire.


  • Eviter d’utiliser ‘bind’

bind retourne toujours “any” et ne vérifie pas le type des paramètres qu’on lui envoie.


Donc au lieu d’utiliser :

const cb = this.updateOffset.bind(offset);

Écrire plutôt :

const cb = (offset: string) => this.updateOffset(offset);

 

  • Generics

Les gererics sont pratiques lorsqu’on veut définir une même interface prenant un certain type en paramètre.

Par exemple nous pourrions avoir ces deux interfaces :

interface UsersResponse {
	success: boolean;
	msg: string;
	data: User[];
}
interface CarsResponse {
	success: boolean;
	msg: string;
	data: Car[];
}


On voit que l’on répète les mêmes propriétés, seul le type de ‘data’ change. Nous pouvons ici utiliser un Generic et ne définir qu’une seule interface :

interface Response<T> {
	success: boolean;
	msg: string;
	data: T;
}


On pourra ensuite l’utiliser comme suit :

const response: Response<User[]>; 


  • Typer les retours de fonctions

Bien penser à typer le retour des fonctions.


  • Utiliser private, public, protected

Privilégier autant que possible private.


  •  Utiliser les Utility Types (Partial, Pick, Readonly…)

Partial, Pick, Readonly…

Quelques exemples pour cette interface :

interface User {
	firstName: string;
	lastName: string;
	email: string;
	phone: number;
	birthday: number;
}


  • Partial<User> : rend toutes les propriétés facultatives
  • Pick<User, ‘firstName’ | ‘lastName’> : typer un objet avec une liste définie de propriétés
  • Readonly<User> : rendre explicite le fait que la variable typée est en lecture seule


  • Configurer VS code & ESlint

Procédure expliquée dans cet article.


  • Ne pas préfixer les interfaces par I (déprécié)

Les interfaces ne devraient pas être préfixées par I.


  • Paramètres de fonction

Au lieu de

function compute(x: number, y: number, z: number) { ... }
compute(2, 3, 4);


Ecrire plutôt cela pour faciliter la lecture lors de l’appel de la fonction:

function compute(options: {x: number; y: number; z: number}) { ... }
compute({ x: 2, y: 3, z: 4 });