Muitos desenvolvedores estão confusos ao escolher entre uma interface TypeScript ou um tipo. Isto é provavelmente porque eles são muito similares com pequenas diferenças.
Vamos explorar algumas práticas sensatas e padrões, enquanto descobrem algumas jóias escondidas na linguagem TypeScript e respondem a pergunta “Devo usar uma interface ou um tipo?”
Pós terminar, veja meu outro artigo sobre Interfaces TypeScript vs Classes!
Aqui está minha regra: Para casos de uso como a criação de novos tipos através de coisas como primitivas, tipos de união e tipos de tuple, eu prefiro usar a palavra-chave type. Para qualquer outra coisa (objetos/arrays), é uma interface.
Uma interface é extremamente útil quando se lida com estruturas de dados, pois são uma representação muito visual (embora assim seja type, esta é tipicamente a minha preferência). É completamente correto escolher um type para seus objetos e arrays também.
Não obstante, vamos descobrir mais sobre Tipos vs Interfaces em TypeScript para que você possa tomar uma decisão mais informada.
Objetos: Type vs Interface
Tipicamente definiríamos uma estrutura de dados para modelar um tipo contra nossas variáveis e argumentos de função pretendidos. Na maioria das vezes uma estrutura de dados é um array ou um objeto que pode conter alguns métodos.
Vamos criar um objeto como uma interface (abordagem recomendada):
interface Milkshake { name: string; price: number; getIngredients(): string;}Aqui, eu prefiro usar uma interface porque é claro que é uma interface e não uma variável com dados atribuídos – uma bela vitória na legibilidade. Estamos usando name e price para permitir a configuração de registros e getIngredients como nosso método chama.
🎉 Baixe grátis!
Pronto para ir além do ForEach? Fique confiante com métodos avançados – Reduza, Encontre, Filtre, Todos, Alguns e Mapeie.
-
Compreender totalmente como gerir estruturas de dados JavaScript com operações imutáveis - 31 páginas de sintaxe profunda, exemplos do mundo real, dicas e truques
- Escrever lógicas de programação mais limpas e melhor estruturadas em 3 horas
Como um bónus extra, também lhe enviaremos alguns extras através de alguns emails extra.
Quando comparamos isso com um tipo – pode facilmente ser confundido como um objeto real devido à atribuição =:
type Milkshake = { name: string; price: number; getIngredients(): string;}; Esta é apenas a minha pequena preferência por escolher um interface em vez de usar um type aqui – mas você é livre para usar a palavra-chave type se desejar.
Intersectar: Tipo vs Interface
Intersectar significa simplesmente combinar um ou mais tipos! Este padrão pode ser realizado usando tanto um interface ou type.
Vamos assumir as seguintes interfaces, vou mostrar-lhe como podemos intersectar um interface e type:
interface MilkshakeProps { name: string; price: number;}interface MilkshakeMethods { getIngredients(): string;}Com uma interface, nós intersectaríamos usando a palavra-chave extends. Estou usando múltiplas interfaces para mostrar como estender (herdar) em uma interface final Milkshake contendo todas as propriedades e métodos definidos em outro lugar:
// { name: string, price: number, getIngredients(): string }interface Milkshake extends MilkshakeProps, MilkshakeMethods {} Agora podemos usar Milkshake em qualquer lugar que quisermos e podemos nos beneficiar de ter name, price e getIngredients em apenas uma referência de interface.
Aqui está como faríamos o mesmo com um type e cruzando os tipos via &:
// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & MilkshakeMethods;Eu recomendaria usar um type em vez de um interface quando você quiser cruzar os tipos. Usar extends parece um pouco mais verboso e não tão claro para ler e sinto que foi para isso que a palavra-chave type foi feita.
Também é super fácil combinar mais tipos com type. Acho o código mais claro do que usar extends com intefaces.
Interface também são limitados – o type pseudónimo pode ser usado para tipos mais complexos como tuples, primitivos, uniões e outros mais:
// { name: string, price: number, getIngredients(): string }type Milkshake = MilkshakeProps & { getIngredients(): string };Primitives: Tipo vs Interface
Deixemos falar de tipos primitivos. Sim, strings, números, etc. Você só pode atribuir um tipo primitivo a um type alias:
type MilkshakeName = string;interface Milkshake { name: MilkshakeName; price: number;}Se você precisar usar um primitivo, use um type. Aqui as interfaces são um não para um único valor, pois a sintaxe não o suporta.
🎉 Descarregue grátis!
Pronto para ir além do ForEach? Fique confiante com métodos avançados – Reduza, Encontre, Filtre, Todos, Alguns e Mapeie.
- Compreender totalmente como gerir estruturas de dados JavaScript com operações imutáveis
- 31 páginas de sintaxe profunda, exemplos do mundo real, dicas e truques
- Escrever lógicas de programação mais limpas e melhor estruturadas em 3 horas
Como um bónus extra, também lhe enviaremos alguns extras através de alguns emails extra.
Na maioria dos casos, porém, seria mais fácil usar diretamente o valor primitivo:
interface Milkshake { name: string; price: number;}Não complique em demasia o seu código!
Classes: Tipo vs Interface
Se você escolheu um type ou interface a forma como o usamos com uma classe é a mesma:
type Size = { size: string};interface Milkshake { name: string; price: number; getIngredients(): string;}class Order implements Size, Milkshake { // Size size = 'large'; // Milkshake name = 'Vanilla'; price = 399; getIngredients() { return ; }}Classes não suportam tipos de implementação/extensão de uniões, porque são considerados como plantas estáticas. Isto significa que você precisa ser super explícito sobre cada tipo que você implementa, pois não pode ser dinâmico ou mudar agora devido a limitações do TypeScript.
Saiba mais sobre Interfaces TypeScript vs Classes!
Funções: Type vs Interface
Tipicamente eu criaria uma função usando o type alias como na maioria das vezes queremos digitar uma função anônima:
type IngredientsFn = () => string;const getIngredients: IngredientsFn = () => ;No entanto, se usar um interface para isso seria mais o seu estilo, aqui está como fazer isso:
interface IngredientsFn { () => string;} Parece um pouco estranho em comparação com o uso de type, mas novamente ambos são completamente válidos TypeScript e não há diferença quando o código é compilado.
Quando não usar um Type
Agora exploramos as várias comparações e abordagens recomendadas, é hora de falar sobre a fusão de declarações, uma funcionalidade do TypeScript que se aplica a apenas interface e seria um motivo para escolher um interface em vez de um type.
Para fundir tipos usando type, teríamos que fazer algo assim e criar um novo final type:
type MilkshakeProps = { name: string; price: number;};type MilkshakeMethods = { getIngredients(): string;};type Milkshake = MilkshakeProps & MilkshakeMethods; Nosso type Milkshake é agora um tipo alias de MilkshakeProps e MilkshakeMethods. Note, que para atingir este comportamento tivemos de criar Milkshake, dando-nos 3 alias de tipo individual.
Com interfaces, há de facto uma abordagem mais inteligente (alguns podem dizer um pouco inteligente demais) chamada de fusão de declarações.
Podemos conseguir uma fusão de declarações simplesmente declarando a mesma interface duas vezes no mesmo escopo (isso poderia ser através da importação da interface de outro módulo, ou declarando-a localmente ao lado de outra interface):
// declared once...interface Milkshake { name: string; price: number;}// declared again the same, it works!interface Milkshake { getIngredients(): string;}// { name: string, price: number, getIngredients(): string }const milkshake: Milkshake = { name: 'Banana', price: 399, getIngredients() {...}};Milkshake agora contém name, price e getIngredients! No entanto, a declaração de fusão é uma coisa boa? Honestamente não sou um fã e sinto que isso pode levar a mais mal do que bem. Eu comporia seus tipos através de type ao invés de usar declaration merging – mas pelo menos você sabe a(s) principal(is) diferença(s) agora.
Conclusion
Então aí você tem! As principais diferenças entre Tipos e Interfaces em TypeScript.
Para recapitular, com algumas preferências pessoais também, eu ficaria com um interface para objetos e usaria a palavra-chave type alias para compor novos tipos na mosca. Estes novos tipos poderiam até ser de interfaces ou outros tipos como tuplos, uniões e tipos de intersecção. Há muitas possibilidades, mas ao entender abordagens podemos começar a escolher a ferramenta certa.
Para a maior parte, interfaces e tipos são praticamente os mesmos, além de algumas diferenças cobertas aqui. Espero que tenha gostado de ler!
Se você está falando sério sobre suas habilidades em TypeScript, seu próximo passo é dar uma olhada nos meus cursos de TypeScript, eles lhe ensinarão o básico completo da linguagem em detalhes, bem como muitos casos de uso avançado que você precisará no desenvolvimento diário de TypeScript!
Codificação Feliz!
