Formatador TypeScript

O que faz um formatador TypeScript

O TypeScript acrescenta tipos ao JavaScript: interfaces, generics, enums, uniões e anotações em cada parâmetro. Toda essa sintaxe extra deixa o layout ainda mais importante. A assinatura longa de uma função com parâmetros genéricos e tipo de retorno é difícil de ler em uma linha só, e os tipos de objeto escritos por pessoas diferentes vão se afastando no estilo.

Este formatador roda o Prettier 3 com o parser de TypeScript no seu navegador. Ele lê o seu código e o escreve de volta com um layout único e consistente. O código em si, incluindo todos os tipos, continua exatamente igual.

Como usar

1. Cole TypeScript na caixa da esquerda. Ele é formatado assim que você cola.
2. Ou clique em Abrir arquivo para carregar um arquivo .ts, ou em Exemplo para testar com um exemplo.
3. Escolha as opções: Recuo (2 espaços, 4 espaços ou tabulações), Largura da linha (de 80 a 160), Vírgulas finais (Todas, ES5 ou Nenhuma), Aspas simples e Ponto e vírgula.
4. Clique em Formatar ou use Ctrl+Enter.
5. Clique em Copiar, ou em Baixar para salvar um arquivo .ts.

A primeira formatação carrega o parser de TypeScript. Depois disso, o resultado é atualizado enquanto você digita.

Antes e depois

Entrada compactada:

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

Depois de Formatar com as opções padrão:

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 membro da interface ganha sua própria linha, as anotações ganham um espaço depois dos dois-pontos e o array de objetos é dividido porque passaria de 80 caracteres em uma linha. Objetos curtos ficam em uma linha dentro do array.

Generics e aliases de tipo recebem o mesmo tratamento:

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

Classes com modificadores de acesso e o 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);
  }
}

Com o Recuo em tabulações, um enum fica assim (cada membro começa com uma tabulação):

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

Erros de sintaxe

Quando o código não pode ser analisado, você recebe a mensagem do parser de TypeScript, em inglês, com a posição. Dois exemplos:

• let count: number = ; dá Linha 1, coluna 21: Expression expected.
• function add(a: number, b: number { dá Linha 1, coluna 35: ',' expected., apontando para o lugar em que falta o parêntese de fechamento.

Clique em Mostrar na entrada para colocar o cursor no problema.

Lembre que uma formatação limpa não é uma compilação limpa. Esta linha é formatada sem problema, mesmo sendo um erro de tipo:

let count: number = "five";

Só o compilador do TypeScript pega esse erro.

Dicas

• Se o seu projeto tem um .prettierrc, use as mesmas opções aqui para que o resultado bata com o seu repositório.
• A opção Vírgulas finais em Todas também acrescenta vírgulas depois do último parâmetro de tipo e do último parâmetro de função quando eles quebram de linha. Escolha ES5 se preferir vírgulas só em arrays e objetos.
• Em arquivos .tsx com React, o parser de TypeScript também entende JSX.
• Vai formatar um schema GraphQL que fica ao lado dos seus tipos? Use o formatador GraphQL. Para arquivos JSON de configuração, como o tsconfig.json, lembre que eles aceitam comentários, o que o JSON estrito não aceita; o formatador JSON vai apontar esses comentários.

Outras formas de formatar TypeScript

• O VS Code já vem com um formatador de TypeScript. Use Formatar Documento (Shift+Alt+F no Windows, Shift+Option+F no macOS). Para ter um resultado igual ao desta página, instale a extensão do Prettier e escolha-a como formatador padrão.
• Linha de comando: npx prettier --write "src/**/*.ts" formata uma pasta inteira.
• Hooks de pré-commit: ferramentas como o lint-staged rodam o Prettier nos arquivos alterados antes de cada commit, para que a formatação nunca chegue à revisão de código.

Para arquivos de JavaScript puro, o formatador JavaScript oferece as mesmas opções com um download menor.