TypeScript Interfaces/interfaces
Brandon M. · 27 de agosto de 2026
¿Qué son?
Que hubo? las interfaces son como un tipo contrato o plano que define la estructura exacta que un objeto debe seguir en TypeScript.
¿Pa que sirven?
Básicamente le dicen a TypeScript oye we, checa esta estructura y fuerza a que se cumpla al pie de la letra tanto las propiedades como la estructura, y esta es una de las cosas mas chidas que ofrece TypeScript, básicamente ya no te puedes equivocar por accidente (siempre y cuando tu interfaz este bien definida xd)
Sintaxis
Es bastante sencilla hacemos uso de la palabra reservada "Interface" seguida del nombre de la interfaz en PascalCase, ojito, eso es opcional el PascalCase, pero es una buena practica y es uso común hoy en día. Dentro de las interfaces también tenemos variantes.
1- Todos los datos obligatorios
interface Perrito {
id: number;
nombre: string;
nivelDePoder: number;
}Ok de esta forma definimos que esta interfaz define la estructura de un objeto con contiene tres datos obligatorios.
2- Con datos opcionales
Va, pues no siempre vamos a querer que todos los datos sean obligatorios, supongamos que a nuestros objetos de Perrito queremos que tengan un campo de apodo de barrio, sin embargo no todos tendran apodo de barrio entonces solamente hace falta agregar "?" depsues del nombre de la propiedad que definamos en la interfaz
interface Perrito {
id: number;
nombre: string;
nivelDePoder: number;
apodoDeBarrio?: string;
}De esta forma declaramos oye todos los datos son obligatorios, menos el de apodo de barrio, pero si lo quieres usar considera que es una cadena de texto.
3- Con propiedades de solo lectura
Va pues, a veces vamos a tener casos donde queremos que ciertos datos solo sean de lectura, generalmente para secretos como podría ser llaves API, en fin, para estos solo basta agrega run readonly al inicio del dato que queremos que sea solo de lectura, mi ejemplo va tar churpio pero pues ahí ta.
interface Perrito {
id: number;
nombre: string;
nivelDePoder: number;
apodoDeBarrio?: string;
readonly perritosAPI: string;
}De esta forma decimos que el API Key de la API de perritos sera solo de lectura.
4- Extensión de la interfaces
A su pota mauser, suena mamalon y lo es pero no es complicado, solamente sirve para decirle "hey TS a esta interfaz agrégalo las propiedades de esta otra interfaz"
interface Perrito {
id: number;
nombre: string;
nivelDePoder: number;
apodoDeBarrio?: string;
readonly perritosAPI: string;
}
interface SoyAdmin extendes Perrito{
permisos: int[];
}Y así mero le decimos e wey la interfaz SoyAdmin va a tener una propiedad de array de enteros que se llamara permisos, pero también va a tener todas las propiedades de la interfaz de Perrito.
Extra extra
Otra cosita si tienes dos interfaces con el mimos nombre TS directamente las va a unir, por ejemplo:
interface Perrito {
nivelDePoder: number;
apodoDeBarrio?: string;
readonly perritosAPI: string;
}
interface Perrito {
id: number;
nombre: string;
}Para TS va ser lo mismo que si lo escribieras todo junto
interface Perrito {
id: number;
nombre: string;
nivelDePoder: number;
apodoDeBarrio?: string;
readonly perritosAPI: string;
}