Interfaces: interfaces indizadas

Un tipo indizado es un tipo que permite acceder a elementos mediante índices, como por ejemplo, un array o un objeto. En este vídeo explico cómo utilizar las interfaces para anunciar que la interfaz admite acceso indizado.

Las interfaces en TypeScript nos permiten definir estructuras de datos con gran precisión, y una de las características más interesantes, aunque menos conocidas al principio, son los accesores indizados. Estos accesores nos permiten especificar cómo se puede acceder a las propiedades de un objeto o a los elementos de un array mediante índices, ya sean numéricos o de tipo string.

En JavaScript, tanto los arrays como los objetos son tipos indizables. Esto significa que podemos acceder a sus elementos o propiedades usando corchetes con un índice o una clave. Por ejemplo, en un array podemos acceder a la posición cero con vector[0], y en un objeto podemos acceder a una propiedad con object["displayName"]. Aunque normalmente usamos la notación de punto para acceder a propiedades de objetos, la notación con corchetes también es válida y reconocida por TypeScript, que infiere correctamente el tipo del valor accedido.

Lo que podemos hacer en TypeScript es definir interfaces que indiquen que un objeto debe soportar este tipo de acceso indizado. Para ello, dentro de la interfaz declaramos un accesor indizado, que tiene una sintaxis particular: usamos corchetes con un parámetro que representa el índice, y especificamos el tipo que debe devolver ese acceso. Por ejemplo, si queremos que un objeto permita acceder a sus elementos mediante un índice numérico y que el valor devuelto sea un booleano, definimos la interfaz así:

interface IndieFable {
  [index: number]: boolean;
}

Con esta definición, cualquier variable de tipo IndieFable podrá ser accedida con un número entre corchetes, y TypeScript entenderá que el resultado es un booleano. Esto es útil cuando queremos garantizar que el acceso por índice siempre devuelva un tipo concreto, lo que ayuda a estructurar y controlar mejor los datos.

Además, no estamos limitados a índices numéricos. También podemos definir accesores indizados con índices de tipo string, lo que es especialmente útil para objetos que funcionan como mapas clave-valor. Por ejemplo, si queremos que al acceder con una cadena obtengamos un string, podemos definir:

interface IndieFable {
  [key: string]: string;
}

Esto indica que cualquier acceso con una clave de tipo string devolverá un valor de tipo string. Es importante entender que esta característica se usa principalmente para especificar el tipo de retorno cuando accedemos mediante índices, más que para definir los tipos internos de las propiedades del objeto.

En definitiva, los accesores indizados en interfaces nos permiten expresar que un objeto o array debe soportar el acceso mediante índices y que el valor resultante debe ser de un tipo específico. Aunque puede parecer una peculiaridad, es una herramienta poderosa para definir contratos claros en nuestros tipos y evitar errores al acceder a datos mediante índices.

Lista de reproducción
  1. 1
    Temporada 1
    5 minutos
  2. 2
    ¿Qué es TypeScript?
    11 minutos
  3. 3
    Instalando TypeScript
    8 minutos
  4. 4
    Compilando un Hola Mundo sencillo
    7 minutos
  5. 5
    Hola Mundo pero con tipos
    10 minutos
  6. 6
    Tipos: tipos primitivos
    12 minutos
  7. 7
    Tipos: tipos especiales (any, null, ...)
    10 minutos
  8. 8
    Tipos: arrays y tuplas
    11 minutos
  9. 9
    Tipos: objetos
    7 minutos
  10. 10
    Funciones: lo básico
    9 minutos
  11. 11
    Funciones: tipando funciones
    9 minutos
  12. 12
    Clases: introducción a las clases
    9 minutos
  13. 13
    Clases: creando una clase
    10 minutos
  14. 14
    Clases: modificador private
    8 minutos
  15. 15
    Clases: modificador readonly
    3 minutos
  16. 16
    Clases: Atributos virtuales con getters y setters
    10 minutos
  17. 17
    Clases: herencia
    9 minutos
  18. 18
    Clases: modificadores abstract y protected
    8 minutos
  19. 19
    Tipos alias
    6 minutos
  20. 20
    Tipos literales
    5 minutos
  21. 21
    Uniones de tipos
    7 minutos
  22. 22
    Uniones discriminantes
    7 minutos
  23. 23
    Intersecciones de tipos
    5 minutos
  24. 24
    Interfaces: introducción
    7 minutos
  25. 25
    Interfaces: modificadores y funciones
    9 minutos
  26. 26
    Interfaces: usándolas con clases
    8 minutos
  27. 27
    Interfaces: herencia de interfaces
    8 minutos
  28. 28
    Interfaces: interfaces indizadas
    5 minutos
  29. 29
    Interfaces: funciones y tipos híbridos
    5 minutos
  30. 30
    ¿Qué diferencia hay entre interfaces y tipos? (2020)
    8 minutos
  31. 31
    Casteos con as
    6 minutos
  32. 32
    instanceof y las guardas
    9 minutos
  33. 33
    Tipos enumerados
    8 minutos
  34. 34
    Valores avanzados para enumerados
    7 minutos
  35. 35
    Enumerados con valores computados
    6 minutos
  36. 36
    Genéricos en tipos
    8 minutos
  37. 37
    Múltiples genéricos y buenas prácticas
    5 minutos
  38. 38
    Genéricos en funciones
    8 minutos
  39. 39
    Genéricos con restricciones
    6 minutos
  40. 40
    Tipos de utilidad
    3 minutos
  41. 41
    Exportando módulos
    9 minutos
  42. 42
    Importando módulos
    7 minutos
  43. 43
    Export default e import asterisco
    6 minutos
  44. 44
    tsconfig
    7 minutos
  45. 45
    Módulos desde NPM
    7 minutos
  46. 46
    Arroba types y los .d.ts
    8 minutos
  47. 47
    Ejemplo (1): creando una API REST simple en TypeScript
    11 minutos
  48. 48
    Ejemplo (2): montando un servidor Express
    8 minutos
  49. 49
    Ejemplo (3): haciendo las funciones de control de datos
    11 minutos
  50. 50
    Ejemplo (4): conectando todas las piezas
    7 minutos