Tipo vs. Interface no TypeScript

Tipo vs. Interface é uma das coisas mais confusas e interessantes do TypeScript. Tentaremos esclarecer essa confusão.

O TypeScript é criado em cima do JavaScript, que adiciona tipos estáticos . Ter tipos é uma coisa maravilhosa para os desenvolvedores. Escrever tipos será difícil, mas você não vai se arrepender a longo prazo.

TypeScript tem todos os tipos básicos como number, string, boolean, etc. Junto com o tipo básico, TypeScript nos permite criar tipos personalizados e definir como um objeto se parece com a ajuda de Type Aliases e Interfaces, respectivamente.

Um Type Alias ​​nada mais é do que um Type. Criar um tipo com um nome personalizado (alias) o torna um Type Alias, nada mais que isso.

Vejamos a sintaxe básica de Interfaces e Type Aliases .

Sintaxe Básica

Interfaces

As interfaces serão declaradas com a palavra-chave interface . Verifique a sintaxe das interfaces abaixo.

 interface InterfaceName { keyName: typeOfKey ... }

Dê uma olhada no exemplo de exemplo abaixo.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Alias ​​de tipo

Os aliases de tipo serão declarados usando a palavra-chave type . Verifique a sintaxe dos aliases de tipo abaixo.

 type TypeName = { keyName: typeOfKey; ... }

Dê uma olhada no exemplo de exemplo abaixo.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Criamos um tipo para o Site usando a interface e digite alias . Ambos são válidos e podem ser usados ​​para os tipos de objetos mencionados nos exemplos. Apenas a sintaxe é diferente no exemplo acima, o que é óbvio.

Vamos continuar explorando as diferenças entre eles para encontrar mais coisas.

Tuplas

Uma tupla no TypeScript é uma matriz de comprimento pré-definida digitada. Ele define os tipos de cada índice.

Podemos declarar tuplas usando aliases de tipo. Mas não podemos fazer isso usando interfaces. Vamos ver como fazer isso com aliases de tipo.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

No exemplo acima, definimos o tipo para cada elemento de índice do array. Se fornecermos algum outro tipo no array, o TypeScript lançará um erro.

Não podemos fazer isso com interfaces?

Não podemos fazer exatamente como fazemos com aliases de tipo. Interfaces são usadas para tipos de objetos. Então, precisamos ter a tupla dentro do objeto para usá-la nas interfaces. Vamos ver um exemplo.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Se você vir o código, temos uma tupla chamada detalhes dentro da Interface. Assim, podemos usar as tuplas dentro das interfaces.

Da mesma forma, podemos usar aliases de tipo para tipos únicos como string, number, boolean, etc. Como a Interface é usada para os tipos de objeto, podemos usá-la para os tipos únicos, como aliases de tipo.

Outra coisa interessante é que podemos usar o tipo alias tupla nas interfaces . Verifique o exemplo abaixo.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Vamos para a próxima coisa.

Mesclagem de Declaração - Interfaces

A mesclagem de declaração é usar o TypeScript para mesclar tipos de interfaces com o mesmo nome. Vamos ver o exemplo para obter mais clareza sobre isso.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Se você vir o código acima, declaramos a Interface com o mesmo nome 3 vezes. O compilador TypeScript compilará todos esses 3 formulários em um único tipo de objeto que inclui todos os tipos das interfaces que têm o mesmo nome.

Você pode confirmar a mesclagem da declaração removendo uma chave do objeto geekflare . Se você remover uma das chaves do geekflare , verá um erro.

Não podemos fazer a mesma coisa com aliases de tipo. A maioria das pessoas não usa esse recurso. Em geral, ter várias interfaces com o mesmo nome é confuso.

Tipo fãs de alias, não se preocupe com esse recurso de interfaces.

Estende

Digamos que você tenha declarado um tipo. Agora, você deseja declarar outro tipo junto com os tipos do tipo anterior. Nesse caso, podemos estender o tipo anterior. Podemos fazer isso com interfaces e aliases de tipo .

Vamos ver os dois.

Interfaces

Existe uma palavra-chave chamada extends para este caso de uso no TypeScript. Vamos usá-lo para estender as interfaces. Vamos verificar o exemplo.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Criamos a Geekflare Interface estendendo a Interface do Site . Todos os tipos de Site estarão presentes na Interface Geeflare junto com seus próprios tipos. Você pode remover a chave de name da variável geekflare para confirmá-la.

Podemos estender várias interfaces da seguinte maneira.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Tente estender com mais de 2 interfaces por diversão. Também podemos estender aliases de tipo com a Interface.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Nós estendemos apenas um tipo no exemplo acima. Você pode estender quantas quiser, semelhante ao exemplo anterior de estender várias interfaces.

Vamos ver como fazer isso com aliases de tipo.

Alias ​​de tipo

Podemos estender os aliases de tipo usando o tipo de interseção no TypeScript. Vamos ver um exemplo.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Estendemos o tipo Site com founder para o tipo Geekflare usando a interseção (&) . Você pode testá-lo removendo uma das chaves da variável geekflare , o que gerará um erro.

Semelhante às interfaces, podemos estender vários tipos da seguinte maneira.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Também podemos estender interfaces com aliases de tipo da mesma forma que interfaces que estendem aliases de tipo. Verifique o exemplo abaixo.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Tente estender a combinação de aliases de tipo e interfaces.

Implementação

Esta não é uma diferença entre interfaces e aliases de tipo. Apenas uma característica de class para saber.

Uma classe pode implementar o alias de interface e de tipo da mesma maneira. Vamos ver os exemplos para ambos.

Interfaces

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Alias ​​de tipo

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Nota: uma coisa a lembrar é que não podemos implementar tipos de união (|) ou interseção (&) com classes.

Palavras finais

Como você vê nos artigos, podemos fazer tudo com aliases de tipo e interfaces. Portanto, não podemos dizer estritamente que um é melhor que o outro. No final, é uma escolha pessoal escolher um deles. Você desenvolverá seu estilo de usá-los eventualmente.

Em seguida, você pode conferir Typescript vs. Javascript.

Codificação feliz