Formateador TypeScript

Qué hace un formateador TypeScript

Un formateador TypeScript importa más de lo que parece, porque TypeScript añade tipos a JavaScript: interfaces, genéricos, enums, uniones y anotaciones en cada parámetro. Toda esa sintaxis extra hace que la disposición sea más importante. Una firma de función larga con parámetros genéricos y un tipo de retorno cuesta leerla en una sola línea, y los tipos de objeto escritos por distintas personas acaban con estilos distintos.

Este formateador ejecuta Prettier 3 con el analizador de TypeScript en tu navegador. Lee tu código y lo vuelve a escribir con una disposición uniforme. El código en sí, incluidos todos los tipos, se queda exactamente igual.

Cómo usarlo

1. Pega TypeScript en el cuadro de la izquierda. Se formatea en cuanto lo pegas.
2. O pulsa Abrir archivo para cargar un archivo .ts, o Ejemplo para probar con una muestra.
3. Elige tus opciones: Sangría (2 espacios, 4 espacios o tabulaciones), Ancho de línea (de 80 a 160), Comas finales (Todas, ES5 o Ninguna), Comillas simples y Punto y coma.
4. Pulsa Formatear o Ctrl+Intro.
5. Pulsa Copiar, o Descargar para guardar un archivo .ts.

El primer formateo carga el analizador de TypeScript. A partir de ahí, el resultado se actualiza mientras escribes.

Antes y después

Entrada comprimida:

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

Después de Formatear con las opciones predeterminadas:

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

Cada miembro de la interfaz va en su propia línea, las anotaciones reciben un espacio después de los dos puntos y el array de objetos se parte porque en una sola línea pasaría de 80 caracteres. Los objetos cortos se quedan en una línea dentro del array.

Los genéricos y los alias de tipo se tratan igual:

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

Clases con modificadores de acceso y el operador ??:

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 la Sangría en tabulaciones, un enum queda así (cada miembro empieza con una tabulación):

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

Errores de sintaxis

Cuando el código no se puede analizar, recibes el mensaje del analizador de TypeScript con una posición. Dos ejemplos:

• let count: number = ; da Línea 1, columna 21: Expression expected.
• function add(a: number, b: number { da Línea 1, columna 35: ',' expected., que señala el lugar donde falta el paréntesis de cierre.

Pulsa Mostrar en la entrada para poner el cursor en el problema.

Recuerda que un formato limpio no garantiza una compilación limpia. Esta línea se formatea sin problemas aunque es un error de tipos:

let count: number = "five";

Solo el compilador de TypeScript lo detecta.

Consejos

• Si tu proyecto tiene un .prettierrc, elige aquí las mismas opciones para que el resultado coincida con tu repositorio.
• La opción Todas de Comas finales también añade comas después del último parámetro de tipo y del último parámetro de función cuando se parten en varias líneas. Elige ES5 si prefieres comas solo en arrays y objetos.
• Para archivos .tsx con React, el analizador de TypeScript también entiende JSX.
• ¿Vas a formatear un esquema GraphQL que está junto a tus tipos? Usa el formateador GraphQL. En cuanto a la configuración JSON como tsconfig.json, ten en cuenta que admite comentarios, algo que el JSON estricto no permite; el formateador JSON los marcará como error.

Otras formas de formatear TypeScript

• VS Code incluye un formateador de TypeScript. Ejecuta Dar formato al documento (Mayús+Alt+F en Windows, Mayús+Option+F en macOS). Para obtener el mismo resultado que esta página, instala la extensión de Prettier y elígela como formateador predeterminado.
• Línea de comandos: npx prettier --write "src/**/*.ts" formatea una carpeta entera.
• Hooks de pre-commit: herramientas como lint-staged pueden ejecutar Prettier sobre los archivos modificados antes de cada commit, para que los problemas de formato nunca lleguen a la revisión de código.

Para archivos de JavaScript normal, el formateador JavaScript ofrece las mismas opciones con una descarga más pequeña.