DEV Community

Cover image for Interfaces vs. Types em TypeScript: Entendendo as Diferenças
Vitor Rios
Vitor Rios

Posted on

5

Interfaces vs. Types em TypeScript: Entendendo as Diferenças

Introdução

TypeScript, uma extensão tipada do JavaScript, introduziu conceitos poderosos para melhorar a qualidade do código e a experiência de desenvolvimento. Entre eles, interface e type são fundamentais, mas frequentemente surgem dúvidas sobre suas diferenças e usos ideais. Este artigo busca esclarecer essas diferenças e orientar sobre quando usar cada um.

O que é Interface?

Uma interface em TypeScript é uma maneira de definir a forma de um objeto. Ela é usada principalmente para descrever a estrutura dos objetos, garantindo que eles tenham as propriedades e tipos específicos.

Características das Interfaces

  1. Extensibilidade: Interfaces são abertas, o que significa que você pode adicionar novas propriedades a uma interface existente em qualquer parte do seu código.
   interface User {
     name: string;
   }

   interface User {
     age: number;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Herança: Interfaces podem estender outras interfaces, facilitando a reutilização de tipos e a criação de tipos compostos.
   interface Person {
     name: string;
   }

   interface User extends Person {
     login: string;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Classes: Interfaces são comumente usadas para definir contratos para classes, especificando quais métodos e propriedades uma classe deve ter.
   interface Serializable {
     serialize(): string;
   }

   class User implements Serializable {
     serialize() {
       return "User Data";
     }
   }
Enter fullscreen mode Exit fullscreen mode

O que é Type?

Um type alias em TypeScript é uma maneira de nomear um tipo, seja ele primitivo, união, interseção ou qualquer outra combinação de tipos.

Características dos Types

  1. Versatilidade: type permite criar tipos que não são apenas objetos. Isso inclui uniões, interseções, primitivos, entre outros.
   type ID = string | number;
   type User = { name: string } & { age: number };
Enter fullscreen mode Exit fullscreen mode
  1. Composição: type pode ser usado para compor novos tipos a partir de tipos existentes.
   type PartialUser = Partial<User>;
Enter fullscreen mode Exit fullscreen mode
  1. Expressões Condicionais: type pode expressar tipos condicionais e mapeados, oferecendo um alto grau de flexibilidade e funcionalidade.
   type ReadOnly<T> = { readonly [P in keyof T]: T[P] };
Enter fullscreen mode Exit fullscreen mode

Diferenças-Chave

  • Extensibilidade: interface é extensível, mas type não é. Isso significa que você pode adicionar novas propriedades a uma interface existente, mas não pode fazer isso com um type.
  • Declaração vs. Expressão: interface é sempre uma declaração de forma, enquanto type pode ser uma declaração ou uma expressão.
  • União e Interseção: type é mais flexível e pode ser usado para criar uniões e interseções de tipos.

Quando Usar Cada Um

  • Use interface quando precisar de extensibilidade ou estiver definindo contratos para objetos ou classes.
  • Use type para uniões, interseções, tipos primitivos, ou quando precisar de tipos complexos ou expressões condicionais.

Conclusão

Embora interface e type possam parecer semelhantes à primeira vista, eles oferecem diferentes funcionalidades e vantagens. Escolher entre interface e type depende das necessidades específicas do seu projeto e do que você está tentando expressar. Em muitos casos, a escolha entre eles pode se resumir a preferências pessoais ou de equipe. Entender essas diferenças é crucial para tirar o máximo proveito do poderoso sistema de tipos do TypeScript.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay