Formattatore TypeScript

Cosa fa un formattatore TypeScript

TypeScript aggiunge i tipi a JavaScript: interfacce, generics, enum, union e annotazioni su ogni parametro. Tutta questa sintassi in più rende l’impaginazione ancora più importante. Una firma di funzione lunga, con parametri generici e tipo di ritorno, è difficile da leggere su una riga, e i tipi oggetto scritti da persone diverse finiscono per avere stili diversi.

Questo formattatore TypeScript esegue Prettier 3 con il parser TypeScript nel tuo browser. Legge il codice e lo ristampa con un’unica impaginazione coerente. Il codice in sé, compreso ogni tipo, resta identico.

Come si usa

1. Incolla il codice TypeScript nel riquadro a sinistra. Viene formattato appena lo incolli.
2. In alternativa premi Apri file per caricare un file .ts, oppure Esempio per provare con un esempio.
3. Scegli le opzioni: Rientro (2 spazi, 4 spazi o tabulazioni), Larghezza riga (da 80 a 160), Virgole finali (Tutte, ES5 o Nessuna), Virgolette singole e Punti e virgola.
4. Premi Formatta o Ctrl+Invio.
5. Premi Copia, oppure Scarica per salvare un file .ts.

La prima formattazione carica il parser TypeScript. Da quel momento il risultato si aggiorna mentre scrivi.

Prima e dopo

Input compresso:

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'}]

Dopo Formatta con le impostazioni predefinite:

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" },
];

Ogni membro dell’interfaccia ha la sua riga, le annotazioni ricevono uno spazio dopo i due punti e l’array di oggetti viene diviso perché su una riga supererebbe gli 80 caratteri. Gli oggetti brevi restano su una riga dentro l’array.

Generics e alias di tipo vengono gestiti allo stesso modo:

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>>;
}

Classi con modificatori di accesso e l’operatore ??:

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);
  }
}

Con il Rientro impostato su tabulazioni, un enum appare così (ogni membro inizia con un carattere di tabulazione):

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

Errori di sintassi

Quando il codice non si può analizzare, ricevi il messaggio del parser TypeScript con la posizione. Due esempi:

• let count: number = ; dà Riga 1, colonna 21: Expression expected. (era attesa un’espressione).
• function add(a: number, b: number { dà Riga 1, colonna 35: ',' expected., che indica il punto in cui manca la parentesi tonda di chiusura.

Premi Mostra nell’input per portare il cursore sul problema.

Ricorda che una formattazione riuscita non è una compilazione riuscita. Questa riga si formatta senza problemi anche se contiene un errore di tipo:

let count: number = "five";

Solo il compilatore TypeScript lo individua.

Consigli

• Se il tuo progetto ha un file .prettierrc, imposta qui le stesse opzioni così il risultato corrisponde al tuo repository.
• L’impostazione Virgole finali su Tutte aggiunge la virgola anche dopo l’ultimo parametro di tipo e l’ultimo parametro di funzione quando vanno a capo. Scegli ES5 se preferisci le virgole solo in array e oggetti.
• Per i file .tsx con React, il parser TypeScript gestisce anche il JSX.
• Devi formattare uno schema GraphQL che sta accanto ai tuoi tipi? Usa il formattatore GraphQL. Per la configurazione JSON come tsconfig.json, tieni presente che ammette i commenti, mentre il JSON rigoroso no: il formattatore JSON li segnalerà.

Altri modi per formattare TypeScript

• VS Code include un formattatore TypeScript. Esegui Format Document (Maiusc+Alt+F su Windows, Maiusc+Opzione+F su macOS). Per un risultato identico a questa pagina, installa l’estensione Prettier e selezionala come formattatore predefinito.
• Riga di comando: npx prettier --write "src/**/*.ts" formatta un’intera cartella.
• Hook di pre-commit: strumenti come lint-staged possono eseguire Prettier sui file modificati prima di ogni commit, così le questioni di formattazione non arrivano mai alla code review.

Per i file JavaScript normali, il formattatore JavaScript offre le stesse opzioni con un download più leggero.