Tipo frente a interfaz es una de las cosas más confusas e interesantes de TypeScript. Intentaremos aclarar esa confusión.
TypeScript se crea encima de 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.
A Tipo de alias 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 el interface palabra clave. 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
}Alias de tipo
Los alias de tipo se declararán utilizando el type palabra clave. 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 usando el interfaz. y tipo 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.
Tuples
A 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 ves 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 los tipos de objetos, podemos usarla para los tipos únicos, como los alias de tipo.
Otra cosa interesante es que podemos usar el tupla de alias de tipo en el capítulo respecto a la 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.
Declaration Merging – 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 de la geekflare objeto. Si quita una de las llaves 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 😅.
Extends
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 con los dos. las interfaces y 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'
}Asimismo, hemos creado Geekflare Interfaz mediante la ampliación de la Site Interfaz. Todos los tipos de Site estará presente en Geeflare Interfaz junto con sus propios tipos. Puedes eliminar name clave de la geekflare variable para confirmarlo.
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 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.
Alias de tipo
Podemos extender los alias de tipo usando el tipo de intersección en mecanografiado. 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 extendido la Site escribir con founder en Geekflare escribe usando el intersección (&). Puede probarlo quitando una de las llaves del geekflare variable, que arrojará 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.
Implementing
Esta no es una diferencia entre las interfaces y los alias de tipo. Sólo una característica de class 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)
}
}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: una cosa para recordar es que no podemos implementar unión (|) or intersección (&) tipos con clases.
Palabras finales
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 Texto mecanografiado frente a Javascript.
Codificación feliz 🙂
