Tipo vs. Interface em TypeScript

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

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

TypeScript tem todos os tipos básicos como número, string, booleano, etc. Juntamente com o tipo básico, o TypeScript nos permite criar tipos personalizados e definir a aparência de um objeto com a ajuda de Type Aliases e Interfaces, respectivamente.

A Digite Alias nada mais é do que um Tipo. Criar um tipo com um nome personalizado (alias) torna-o um Type Alias, nada mais do que isso.

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

Sintaxe Básica

Interfaces

As interfaces serão declaradas com o interface palavra-chave. 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 tecnologico: Site = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25
}

Aliases de tipo

Aliases de tipo serão declarados usando o type palavra-chave. 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 tecnologico: Site = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25
}

Criamos um tipo para o Site usando o interface e digite alias. Ambos são válidos e podem ser usados ​​para os tipos de objeto 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

A 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 tecnologico: Site = ('Tecnologico', 'https://tecnologico.online/', 25)

No exemplo acima, definimos o tipo de cada elemento de índice para o array. Se fornecermos algum outro tipo na matriz, 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 utilizá-la nas interfaces. Vejamos um exemplo.

 interface Site {
    details: (string, string);
    pagesCount: number;
}

const tecnologico: Site = {
    details: ('Tecnologico', 'https://tecnologico.online/'),
    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, número, booleano, etc. Como a interface é usada para os tipos de objeto, podemos usá-la para tipos únicos, como aliases de tipo.

Outra coisa interessante é que podemos usar o digite alias tupla no interfaces. Verifique o exemplo abaixo.

 type Details = (string, string)

interface Site {
    details: Details;
    pagesCount: number;
}

const tecnologico: Site = {
    details: ('Tecnologico', 'https://tecnologico.online/'),
    pagesCount: 25,
}

Vamos para a próxima coisa.

Fusão 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 ficar mais claro.

 interface Site {
    name: string;
}

interface Site {
    url: string;
}

interface Site {
    pagesCount: number;
}

const tecnologico: Site = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25,
}

Se você vir o código acima, declaramos a Interface com o mesmo nome 3 vezes. O compilador TypeScript irá 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 tecnologico./code> objeto. Se você remover uma das chaves de tecnologico./code>você verá um erro.

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

Fãs do tipo alias, não se preocupem com esse recurso das 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 com os dois interfaces e aliases de tipo.

Vamos ver os dois.

Interfaces

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

 interface Site {
    name: string;
    url: string;
    pagesCount: number;
}

interface Tecnologico extends Site {
    founder: string;
}

const tecnologico: Tecnologico = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25,
    founder: 'Chandan'
}

Nós criamos Tecnologico Interface estendendo o Site Interface. Todos os tipos de Site estará presente em Tecnologico Interface junto com seus próprios tipos. você pode remover name chave do tecnologico./code> variável para confirmá-lo.

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: 'Tecnologico',
    age: 7,
    profession: 'Helping Techies'
} 

Tente estender com mais de 2 interfaces para se divertir. Também podemos estender aliases de tipo com a Interface.

 type Site = {
    name: string;
    url: string;
    pagesCount: number;
}

interface Tecnologico extends Site {
    founder: string;
}

const tecnologico: Tecnologico = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25,
    founder: 'Chandan'
}

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

Vamos ver como fazer isso com aliases de tipo.

Aliases de tipo

Podemos estender os aliases de tipo usando o tipo de cruzamento em TypeScript. Vejamos um exemplo.

 type Site = {
    name: string;
    url: string;
    pagesCount: number;
}

type Tecnologico = Site & {
    founder: string;
}

const tecnologico: Tecnologico = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25,
    founder: 'Chandan'
}

Nós estendemos o Site digite com founder para Tecnologico digite usando o cruzamento (&). Você pode testá-lo removendo uma das chaves do tecnologico./code> variável, 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: 'Tecnologico',
    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 Tecnologico = Site & {
    founder: string;
}

const tecnologico: Tecnologico = {
    name: 'Tecnologico',
    url: 'https://tecnologico.online/',
    pagesCount: 25,
    founder: 'Chandan'
}

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

Implementando

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

Uma classe pode implementar interface e alias de tipo da mesma maneira. Vejamos os exemplos de ambos.

Interfaces

 interface Site {
    name: string;
    url: string;
    pagesCount: number;
}

class Tecnologico implements Site {
    name = 'Tecnologico'
    url = 'https://tecnologico.online/'
    pagesCount = 25

    constructor() {
        console.log(this.name, this.url, this.pagesCount)
    }
}

Aliases de tipo

 type Site = {
    name: string;
    url: string;
    pagesCount: number;
}

class Tecnologico implements Site {
    name = 'Tecnologico'
    url = 'https://tecnologico.online/'
    pagesCount = 25

    constructor() {
        console.log(this.name, this.url, this.pagesCount)
    }
}

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

Palavras Finais

Como você pode ver 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.

A seguir, você pode conferir Datilografado vs. Javascript .

Codificação feliz