Formateur TypeScript

Ce que fait un formateur TypeScript

TypeScript ajoute des types à JavaScript : interfaces, génériques, enums, unions et annotations sur chaque paramètre. Toute cette syntaxe supplémentaire rend la mise en page encore plus importante. Une longue signature de fonction avec des paramètres génériques et un type de retour est difficile à lire sur une ligne, et les types d’objets écrits par différentes personnes divergent vite en style.

Ce formateur TypeScript exécute Prettier 3 avec l’analyseur TypeScript dans votre navigateur. Il lit votre code puis le réécrit avec une mise en page unique. Le code lui-même, y compris chaque type, reste exactement identique.

Mode d’emploi

1. Collez du TypeScript dans la zone de gauche. Il est formaté dès le collage.
2. Ou appuyez sur Ouvrir un fichier pour charger un fichier .ts, ou sur Exemple pour essayer un exemple.
3. Choisissez vos options : Indentation (2 espaces, 4 espaces ou tabulations), Largeur de ligne (80 à 160), Virgules finales (Toutes, ES5 ou Aucune), Guillemets simples et Points-virgules.
4. Appuyez sur Formater ou Ctrl+Entrée.
5. Appuyez sur Copier, ou sur Télécharger pour enregistrer un fichier .ts.

Le premier formatage charge l’analyseur TypeScript. Ensuite, le résultat se met à jour pendant la frappe.

Avant et après

Saisie compressée :

interface User{id:number;name:string;email?:string}export function greet(user:User,greeting:string='Hello'):string{return `${greeting}, ${user.name}`}const users:User[]=[{id:1,name:'Ada'},{id:2,name:'Linus'}]

Après Formater avec les valeurs par défaut :

interface User {
  id: number;
  name: string;
  email?: string;
}
export function greet(user: User, greeting: string = "Hello"): string {
  return `${greeting}, ${user.name}`;
}
const users: User[] = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];

Chaque membre de l’interface reçoit sa propre ligne, les annotations une espace après le deux-points, et le tableau d’objets est découpé car il dépasserait 80 caractères sur une ligne. Les petits objets restent sur une ligne à l’intérieur du tableau.

Les génériques et les alias de types sont traités de la même façon :

type ApiResponse<T> = { data: T; error?: string };
async function get<T>(url: string): Promise<ApiResponse<T>> {
  const r = await fetch(url);
  return r.json() as Promise<ApiResponse<T>>;
}

Les classes avec modificateurs d’accès et l’opérateur ?? :

class Cart {
  private items: Map<string, number> = new Map();
  add(id: string, qty = 1): void {
    this.items.set(id, (this.items.get(id) ?? 0) + qty);
  }
}

Avec l’Indentation réglée sur tabulations, un enum ressemble à ceci (chaque membre commence par une tabulation) :

enum Role {
	Admin = "admin",
	Editor = "editor",
}

Erreurs de syntaxe

Quand le code ne peut pas être analysé, vous obtenez le message de l’analyseur TypeScript, en anglais, avec une position. Deux exemples :

• let count: number = ; donne Ligne 1, colonne 21 : Expression expected.
• function add(a: number, b: number { donne Ligne 1, colonne 35 : ',' expected., qui pointe l’endroit où manque la parenthèse fermante.

Appuyez sur Afficher dans l’entrée pour placer le curseur sur le problème.

N’oubliez pas qu’un formatage réussi n’est pas une compilation réussie. Cette ligne se formate très bien alors qu’elle contient une erreur de type :

let count: number = "five";

Seul le compilateur TypeScript la repère.

Conseils

• Si votre projet a un fichier .prettierrc, réglez ici les mêmes options pour que le résultat corresponde à votre dépôt.
• Le réglage Toutes de Virgules finales ajoute aussi des virgules après le dernier paramètre de type et le dernier paramètre de fonction quand ils passent à la ligne. Choisissez ES5 si vous préférez des virgules seulement dans les tableaux et les objets.
• Pour les fichiers .tsx avec React, l’analyseur TypeScript gère aussi le JSX.
• Vous formatez un schéma GraphQL à côté de vos types ? Utilisez le formateur GraphQL. Pour une configuration JSON comme tsconfig.json, notez qu’elle accepte les commentaires, ce que le JSON strict n’accepte pas : le formateur JSON les signalera.

Autres façons de formater du TypeScript

• VS Code est livré avec un formateur TypeScript. Lancez Mettre en forme le document (Maj+Alt+F sous Windows, Maj+Option+F sous macOS). Pour un résultat identique à cette page, installez l’extension Prettier et choisissez-la comme formateur par défaut.
• Ligne de commande : npx prettier --write "src/**/*.ts" formate tout un dossier.
• Hooks de pre-commit : des outils comme lint-staged peuvent lancer Prettier sur les fichiers modifiés avant chaque commit, pour que la mise en forme n’arrive jamais en revue de code.

Pour des fichiers JavaScript simples, le formateur JavaScript propose les mêmes options avec un téléchargement plus léger.