Tipo vs. Interfaz en TypeScript

Tipo frente a interfaz es una de las cosas más confusas e interesantes de TypeScript. Intentaremos aclarar esa confusión.

TypeScript se crea sobre JavaScript, que agrega tipos estáticos . Tener tipos es algo maravilloso para los desarrolladores. Escribir tipos será difícil, pero no te arrepentirás a la larga.

TypeScript tiene todos los tipos básicos como número, cadena, booleano, etc. Junto con el tipo básico, TypeScript nos permite crear tipos personalizados y definir cómo se ve un objeto con la ayuda de alias de tipo e interfaces. respectivamente.

Un alias de tipo no es más que un tipo. Crear un tipo con un nombre personalizado (alias) lo convierte en un alias de tipo, nada más que eso.

Veamos la sintaxis básica de interfaces y alias de tipo .

Sintaxis básica

Interfaces

Las interfaces se declararán con la palabra clave de interface . Compruebe la sintaxis de las interfaces a continuación.

 interface InterfaceName { keyName: typeOfKey ... }

Eche un vistazo al ejemplo de ejemplo a continuación.

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

Tipo de alias

Los alias de tipo se declararán utilizando la palabra clave type . Compruebe la sintaxis de los alias de tipo a continuación.

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

Eche un vistazo al ejemplo de ejemplo a continuación.

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

Hemos creado un tipo para el Site utilizando la interfaz y el tipo de alias . Ambos son válidos y se pueden utilizar para los tipos de objetos mencionados en los ejemplos. Solo la sintaxis es diferente en el ejemplo anterior, lo cual es obvio.

Sigamos explorando las diferencias entre ellos para encontrar más cosas.

tuplas

Una tupla en TypeScript es una matriz de longitud predefinida escrita. Define los tipos de cada índice.

Podemos declarar tuplas usando alias de tipo. Pero no podemos hacerlo usando interfaces. Veamos cómo hacerlo con alias de tipo.

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

En el ejemplo anterior, hemos definido el tipo para cada elemento de índice de la matriz. Si le damos algún otro tipo en la matriz, TypeScript arrojará un error.

¿No podemos hacerlo con interfaces?

No podemos hacerlo exactamente como lo hacemos con los alias de tipo. Las interfaces se utilizan para tipos de objetos. Entonces, necesitamos tener la tupla dentro del objeto para usarla en las interfaces. Veamos un ejemplo.

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

Si ve el código, tenemos una tupla llamada detalles dentro de la interfaz. Entonces, podemos usar las tuplas dentro de las interfaces.

De manera similar, podemos usar alias de tipo para tipos únicos como cadena, número, booleano, etc. Como la interfaz se usa para tipos de objetos, podemos usarla para tipos únicos como alias de tipo.

Otra cosa interesante es que podemos usar el tipo tupla alias en las interfaces . Compruebe el siguiente ejemplo.

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

Pasemos a lo siguiente.

Fusión de declaraciones: interfaces

La fusión de declaraciones utiliza TypeScript para fusionar tipos de interfaces con el mismo nombre. Veamos el ejemplo para que quede más claro.

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

Si ve el código anterior, hemos declarado la interfaz con el mismo nombre 3 veces. El compilador de TypeScript compilará todos esos 3 formularios en un solo tipo de objeto que incluye todos los tipos de las interfaces que tienen el mismo nombre.

Puede confirmar la fusión de la declaración eliminando una clave del objeto geekflare . Si elimina una de las claves de geekflare , verá un error.

No podemos hacer lo mismo con los alias de tipo. La mayoría de la gente no usa esa característica. En general, tener múltiples interfaces con el mismo nombre es confuso.

Escriba alias fans, no se preocupe por esta característica de las interfaces.

se extiende

Digamos que ha declarado un tipo. Ahora, desea declarar otro tipo junto con los tipos del tipo anterior. En ese caso, podemos ampliar el tipo anterior. Podemos hacerlo tanto con interfaces como con alias de tipo .

Veámoslos a los dos.

Interfaces

Hay una palabra clave llamada extends para este caso de uso en TypeScript. Lo usaremos para ampliar las interfaces. Veamos el ejemplo.

 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' }

Hemos creado la Interfaz Geekflare ampliando la Interfaz del Site . Todos los tipos de Site estarán presentes en Geeflare Interface junto con sus propios tipos. Puede eliminar la clave de name de la variable geekflare para confirmarla.

Podemos extender múltiples interfaces de la siguiente manera.

 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' }

Intenta ampliar con más de 2 interfaces por diversión. También podemos extender los alias de tipo con la interfaz.

 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' }

Hemos extendido solo un tipo en el ejemplo anterior. Puede extender tantos como desee, de forma similar al ejemplo anterior de extensión de varias interfaces.

Veamos cómo hacerlo con alias de tipo.

Tipo de alias

Podemos extender los alias de tipo usando el tipo de intersección en TypeScript. Veamos un ejemplo.

 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' }

Hemos ampliado el tipo de Site con founder para el tipo Geekflare usando la intersección (&) . Puede probarlo eliminando una de las claves de la variable geekflare , lo que generará un error.

Similar a las interfaces, podemos extender múltiples tipos de la siguiente manera.

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

También podemos extender interfaces con alias de tipo de la misma manera que las interfaces que extienden alias de tipo. Compruebe el ejemplo a continuación.

 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' }

Intente extender la combinación de alias de tipo e interfaces.

Implementar

Esta no es una diferencia entre las interfaces y los alias de tipo. Solo una característica de class para saber.

Una clase puede implementar tanto la interfaz como el alias de tipo de la misma manera. Veamos los ejemplos de 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) } }

Tipo de alias

 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: una cosa para recordar es que no podemos implementar tipos de unión (|) o intersección (&) con clases.

Ultimas palabras

Como ves en los artículos, podemos hacer todo tanto con alias de tipo como con interfaces. Por lo tanto, no podemos decir estrictamente que uno sea mejor que el otro. Al final, es una elección personal elegir uno de ellos. Eventualmente desarrollará su estilo de usarlos.

A continuación, puede consultar Typescript vs. Javascript.

Codificación feliz