No último final de semana, eu peguei o mini-curso de Typescript do Willian Justen e, apesar de já usar typescript no meu dia a dia, achei bem legal para entender um pouco melhor algumas coisas que não peguei aprendendo na prática, ou entender melhor algumas práticas que eu usava mas não entendia muito a fundo a razão de usar. Além de ser gratuito, no YouTube, é bem curto (15 aulas). Recomendo, com certeza, para qualquer um que queira aprender a tecnologia ou entender um pouco melhor.
\nPorém, durante o curso, lembrei de uma dúvida que eu já havia tido antes: qual a diferença entre type aliases e interfaces?
\nNa prática, eles parecem ser a mesma coisa: apesar da sintaxe diferente, você pode usar ambos para declarar objetos, pode implementá-los em classes e pode até rolar uma herança ali, entre eles. Então, tanto faz usar um ou outro?
\nA resposta é: claro que não.
\nExistem diferenças e casos de uso para ambos (apesar de que, na prática, na maioria dos casos, você realmente pode usar tanto um quanto outro).
\nMas vamos lá entender um pouco melhor isso:
\nNada mais são do que formas de tipar constantes ou objetos dentro do typescript.
\nAs interfaces são usadas para, somente, descrever objetos, como é visto no exemplo a seguir:
\ninterface Table {\n\twidth: number\n\theight: number\n\tlength: number\n\tcolor: \"Black\" | \"White\" | \"Brown\"\n\tnumberOfDrawers: 4 | 6\n}Já um type alias é usado para declarar tipos, de modo geral, seja um tipo primitivo, união ou, também, um objeto:
\ntype Height = number\n\ntype Width = number\n\ntype Size = {\n\twidth: Width\n\theight: Height\n};\n\ntype Color = \"Black\" | \"White\" | \"Brown\"\n\ntype Table = {\n\tsize: Size\n\tcolor: Color\n\tnumberOfDrawers: 4 | 6\n}Essa é a diferença mais marcante. Porém, se fosse a única, eu poderia usar type aliases para declarar qualquer tipo, e tava tudo bem, não é mesmo? Na verdade, não precisaria nem de interfaces, já que um type alias também serve para objetos.
\nPorém, as diferenças vão um pouquinho mais além do que isso. Então, listei abaixo algumas semelhanças e diferenças que encontrei, para ficar um pouco mais claro essa diferenciação:
\nRealmente, tanto interfaces quanto type aliases podem ser usados para descrever objectos e funções...
\ntype PersonType = {\n name: string\n age: number\n walk?: (steps: number) => void\n}\n\ninterface IPerson {\n name: string\n age: number\n walk?: (steps: number) => void\n}... Porém, diferente de uma interface, o type alias também pode ser usado para definir tipos simples, como number, string, tuple, union, etc
\n// String\ntype Name = string\nconst myName: Name = 'Guilherme'\n\n// Number\ntype Age = number\nconst myAge: Age = 22\n\n// Union\ntype PartialPointX = { x: number }\ntype PartialPointY = { y: number }\ntype PartialPoint = PartialPointX | PartialPointY\n\n// Tuple\ntype Data = [number, number]\nconst anyData: Data = [ 5, 10 ]Já a interface, quando você define várias com o mesmo nome, o typescript mescla todas elas em uma só, com todas as especificações (o que não acontece com type alias).
\ninterface IPoint {\n y: number\n}\n\ninterface IPoint {\n x: number\n}\n\nconst getRectangleAreaInterface = ({x,y}: IPoint) => console.log(x * y)\ngetRectangleAreaInterface({x: 2, y: 10}) // 20Perceba que, na declaração do getRectangleAreaInterface, o IPoint leva em consideração tanto o y quanto o x.
É possível ocorrer herança tanto entre type aliases e interfaces quanto entre ambos os tipos. Além disso, ambas também podem ser herdadas por classes.
\n// Interface herda interface\ninterface Person { name: string, age: number }\ninterface Human extends Person { walk: (steps: number) => void }\n\n// Interface herda type alias\ntype Person = { name: string, age: number }\ninterface Human extends Person { walk: (steps: number) => void }\n\n// Type alias herda type alias\ntype Person = { name: string, age: number }\ntype Human = Person & { walk: (steps: number) => void }\n\n// Type alis herda interface\ninterface Person { name: string, age: number }\ntype Human = Person & { walk: (steps: number) => void }Obs.: Há diferentes interfaces e tipos com o mesmo nome para fins didáticos. No código, foi preciso deixar cada um em um escopo isolado.
\nUma classe pode implementar tanto uma interface quando um type alias, e a sintaxe é a mesma para ambos os casos.
\nImplementando uma interface:
\ninterface PolygonSides {\n x: number\n y: number\n}\n\nclass Square implements PolygonSides {\n x: 4\n y: 20\n}Implementando um type alias:
\ntype PolygonSides = {\n x: number\n y: number\n}\n\nclass Square implements PolygonSides {\n x: 4\n y: 20\n}Porém, não é possível implementar um type alias se ele for resultado de uma união:
\ntype SideX = { x: number }\ntype SideY = { y: number }\ntype PolygonSides = SideX | SideY\n\nclass Square implements PolygonSides {\n x: 4\n y: 20\n}O código acima retornará o erro
\n\n\nA class can only implement an object type or intersection of object types with statically known members.
\n
Ou, em tradução livre:
\n\n\nUma classe somente pode implementar um objeto ou interseção de objetos com uma quantidade de membros bem definida.
\n
Como eu disse, as diferenças são bem sutis e específicas, apesar delas existirem. Na prática, realmente, na maioria dos casos não vai fazer diferença nenhuma se eu descrever um objeto com type alias ou interface, ou declarar um tipo primitivo com type alias ou informar na própria declaração da variável. Porém, na minha opinião (e, agora, entendendo melhor essas diferenças), acredito que seria bem legal levar o peso semântico em consideração:
\nMas essa é só a minha opinião. No dia a dia, vale definir um padrão com a sua equipe, ou seguir o padrão que ela já determinou.
\nE aí, já sabia dessas diferenças? E qual a sua opinião sobre o melhor uso em cada cenário? Escreve aí nos comentários.
\n"}},"pageContext":{"slug":"/typescript-interface-x-type-alias/","nextPost":{"frontmatter":{"title":"Deixe a minificação para o computador"},"fields":{"slug":"/deixe-a-minificacao-para-o-computador/"}},"previousPost":{"frontmatter":{"title":"Boletim de Sexta - 18/12/2020"},"fields":{"slug":"/boletim-de-sexta-18-12-2020/"}}}},"staticQueryHashes":["2563868181","3014040303","3054600814","764694655","96473684"]}