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[]>;&nbsp;
  • 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 : rend toutes les propriétés facultatives

    • Pick : typer un objet avec une liste définie de propriétés
    • Readonly : 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 });