Interfaces en TypeScript
Las interfaces en TypeScript permiten declarar cuáles atributos debe tener un objeto y de qué tipo, así como también los métodos que debe implementar un objeto pero no define cómo estos deben ser implementados.
Atributos
Para declarar atributos podemos utilizar la siguiente sintaxis. Observa cómo hemos definido una interfaz que requiere dos atributos, name y age, así también como su tipo.
interface User {
name: string,
age: number
}Atributos opcionales
Es posible declarar que ciertos atributos o funciones sean definidas opcionalmente. Para esto, a diferencia de otros lenguajes de programación, se utiliza el caracter ? en el nombre y no el tipo.
interface User {
name: string,
age?: number,
addNote?: (note: string) => void
}Atributos de lectura
Es posible definir atributos que solo sean de lectura. Con esto, sería imposible tratar de hacer una reasignación a un atributo una vez inicializado.
interface User {
readonly type: string;
}Atributos dentro de un stack
Si queremos definir un conjunto de valores posibles para un atributo podemos utilizar el caracter pipe.
interface User {
type: 'Admin' | 'Guest';
name: string;
}También es posible definir un atributo con un tipo enum.
enum UserType {
Admin,
Guest
}
interface User {
type: UserType;
name: string;
}Para ver más a detalle el tipo enum puedes dirigirte a nuestro post Enums en TypeScript.
Métodos
Para declarar métodos podemos utilizar dos sintaxis diferentes. Veamos a continuación cómo definimos el método addNote.
Forma 1
interface User {
addNote(note: string): void;
}Forma 2
interface User {
addNote: (note: string) => void;
}Extensión
Para extender un tipo podemos hacerlo mediante la palabra reservada extends.
interface Animal {
name: string
}
interface Bear extends Animal {
honey: boolean
}En el ejemplo anterior primero se define el alias de tipo Animal. Posteriomente se extiende creando el alias de tipo Bear. Este último tipo requiere los dos atributos de manera obligatoria.
Otra variación interesante de esta característica muy común en la mayoría de los lenguajes de programación es que una interfaz puede extender más de una interfaz sin siquiera definir nuevos atributos. En este caso, es como unir las dos interfaces en una sola. Veamos el siguiente ejemplo.
interface Contact {
name: string;
birthDate: Date;
}
interface Address {
line1: string;
line2?: string;
}
interface User extends Contact, Address {};
Cualquier clase que implemente la interfaz User deberá ahora tener los atributos name, birthDate y line1 de manera obligatoria y opcionalmente line1.
Modificación de tipo
A diferencia de los Alias de Tipos en TypeScript, una interfaz puede ser modificada para agregar más atributos de los que tenía inicialmente.
interface Window {
title: string
}
interface Window {
ts: TypeScriptAPI
}
En el ejemplo anterior el tipo Window resulta tener a la final dos atributos obligatorios, title y ts.