Interfaces en TypeScript

Author
By Darío Rivera
Posted on 2022-09-05 in 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.

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 dos atributos obligatorios a la final.


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.