TypeScript: Diferença entre type e interface

Se você usa React e TypeScript, provavelmente já se perguntou: qual a diferença entre type e interface? 🤔
Muitas vezes vejo que no dia a dia muitos devs escolhem usar um ou outro de forma arbitrária pois para a maioria dos casos acaba não tendo nenhum …


This content originally appeared on DEV Community and was authored by Fernanda Sayuri

Se você usa React e TypeScript, provavelmente já se perguntou: qual a diferença entre type e interface? 🤔
Muitas vezes vejo que no dia a dia muitos devs escolhem usar um ou outro de forma arbitrária pois para a maioria dos casos acaba não tendo nenhum impacto real.

1. Uso

💡 Types são mais flexíveis, usado para definir um alias para um tipo.

type Person = {
  name: string;
  age: number;
};

Além disso, type pode definir uniões de tipos, interface não.

type Status = "success" | "error" | "loading";
interface Status = "success" | "error" | "loading"; // ❌ Erro

💡 Interfaces são ideais para definir a estrutura de objetos e podem ser estendidas com extends, facilitando a reutilização, utilizado para definir um contrato para um objeto.

interface User {
  name: string;
  age: number;
}

2. Herança

Interface permite herança múltipla através de extends.

interface Employee extends Person {
  email: string;
}

Type usa interseção (&) para combinar tipos.

type Employee = Person & {
  email: string;
};

3. Qual Usar?

✔ Use interface quando estiver lidando com objetos e precisar de extensibilidade.
✔ Use type quando precisar de uniões de tipos, interseções, funções ou retorno de apis.

No geral, interfaces são preferidas para objetos, enquanto type é mais flexível para outras situações.

💖 Obrigado por ler, sinta-se à vontade para comentar e interagir!


This content originally appeared on DEV Community and was authored by Fernanda Sayuri


Print Share Comment Cite Upload Translate Updates
APA

Fernanda Sayuri | Sciencx (2025-01-30T02:58:59+00:00) TypeScript: Diferença entre type e interface. Retrieved from https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/

MLA
" » TypeScript: Diferença entre type e interface." Fernanda Sayuri | Sciencx - Thursday January 30, 2025, https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/
HARVARD
Fernanda Sayuri | Sciencx Thursday January 30, 2025 » TypeScript: Diferença entre type e interface., viewed ,<https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/>
VANCOUVER
Fernanda Sayuri | Sciencx - » TypeScript: Diferença entre type e interface. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/
CHICAGO
" » TypeScript: Diferença entre type e interface." Fernanda Sayuri | Sciencx - Accessed . https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/
IEEE
" » TypeScript: Diferença entre type e interface." Fernanda Sayuri | Sciencx [Online]. Available: https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/. [Accessed: ]
rf:citation
» TypeScript: Diferença entre type e interface | Fernanda Sayuri | Sciencx | https://www.scien.cx/2025/01/30/typescript-diferenca-entre-type-e-interface/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.