Firmas de índice de tipo string frente a number
Comprenda las reglas y particularidades de las claves numéricas.
Firmas de índice de tipo string frente a number es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.
Dos tipos de claves de índice
TypeScript admite signaturas de índice de tipo string y de tipo number. Su aspecto es similar, pero se comportan de forma diferente debido a cómo JavaScript almacena realmente las claves de los objetos.
Una signatura de índice numérica
Una signatura de índice numérica { [i: number]: T } describe objetos indexados por posición numérica, especialmente arrays y estructuras similares a arrays.
type NumberList = { [index: number]: string }
const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // anaJS convierte las claves numéricas en cadenas
Este es el dato clave: las claves de los objetos de JavaScript siempre son cadenas. Cuando escribe obj[0], el motor almacena realmente la clave como la cadena "0". TypeScript refleja esta realidad.
const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]La regla de compatibilidad
Como una clave numérica es, en realidad, una cadena internamente, TypeScript impone una regla: cuando un objeto tiene ambas signaturas de índice, numérica y de cadenas, el tipo de valor del índice numérico debe poder asignarse al tipo de valor del índice de cadenas.
interface Mixed {
[key: string]: string
[index: number]: string // must match the string value type
}
const m: Mixed = { 0: "a", name: "b" }
console.log(m[0], m.name)Por qué existe esta regla
Si obj[0] y obj["0"] hacen referencia a la misma posición, el tipo del valor no puede ser number en un caso y string en el otro. Por eso, el valor del índice numérico debe ser un subtipo del valor del índice de cadenas para mantener la coherencia.
// This is an ERROR:
// interface Bad {
// [key: string]: string
// [index: number]: number // number not assignable to string
// }Indexación numérica: arrays
Los arrays son el tipo indexado numéricamente por excelencia. El tipo integrado Array<T> tiene, en la práctica, una signatura de índice numérica, por lo que arr[i] devuelve T.
const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40Las tuplas también usan índices numéricos
Las tuplas se basan en la indexación numérica, pero fijan posiciones concretas a tipos específicos. El acceso numérico fuera de rango recurre a la unión de los tipos de los elementos o genera un error.
const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)El índice de cadenas permite ambos tipos de acceso
Un objeto con una signatura de índice de cadenas también admite accesos con apariencia numérica, porque el número se convierte primero en una clave de tipo string.
type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100 // stored as key "5"
console.log(b["5"]) // 100El índice numérico no acepta cadenas
Lo contrario no es cierto. Un objeto tipado únicamente con una signatura de índice numérica rechaza las claves de tipo string en tiempo de compilación, aunque JavaScript técnicamente las permitiría.
type OnlyNumbers = { [i: number]: string }
const o: OnlyNumbers = { 0: "x" }
// o.name = "y" // Error: property name not on number-indexed type
console.log(o[0])Cómo elegir entre ambas
Utilice un índice de tipo number para datos secuenciales basados en posiciones, como listas y tuplas. Utilice un índice de tipo string para búsquedas con nombre, como diccionarios y cachés. Si tiene dudas, string es la opción más general.
type Positions = { [i: number]: { x: number; y: number } }
type ByName = { [name: string]: { x: number; y: number } }
const p: Positions = { 0: { x: 1, y: 2 } }
console.log(p[0].x)Objeto mixto práctico
Puede combinar ambas signaturas cuando un tipo de valor sea válido para las dos. Esto resulta útil para contenedores dispersos similares a arrays que también exponen posiciones con nombre.
interface Flexible {
[key: string]: number
[index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100Comprobación rápida
Compruebe cuánto domina las signaturas de índice de tipo string frente a las de tipo number.
Resumen
Las signaturas de índice de tipo string y number difieren porque JS almacena todas las claves como cadenas y convierte los números en claves de tipo string. Cuando existen ambas, el tipo de valor del índice numérico debe poder asignarse al tipo de valor del índice de cadenas. La indexación numérica modela arrays y tuplas; la indexación mediante cadenas modela diccionarios. Los objetos indexados mediante cadenas aceptan accesos numéricos, pero los objetos indexados numéricamente rechazan las claves de tipo string en tiempo de compilación.
Preguntas frecuentes
¿La lección «Firmas de índice de tipo string frente a number» es gratis?
Sí — el texto completo de «Firmas de índice de tipo string frente a number» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Firmas de índice de tipo string frente a number»?
Comprenda las reglas y particularidades de las claves numéricas. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar TypeScript Academy?
No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Firmas de índice de tipo string frente a number»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?
Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Definición de firmas de índice
- Firmas de índice de tipo string frente a number
- Combinación de claves conocidas y dinámicas
- Firmas de índice frente a Record