¿Cómo puedo convertir el siguiente código a TypeScript?
var array = []
array.push({
'name': 'hola',
'list': []
})
array[0]['list'].push('list1')
alert(array[0]['name'])
Tuve que dirigirme al PlayGround de TypeScript
para darme cuenta dónde estaba tu problema. Como te explicaba en los comentarios, todo código JavaScript
es también un código TypeScript
, ya que el segundo es un superset del primero. Esto hace la migración de una aplicación menos tediosa porque se puede hacer paso a paso.
Ahora, aunque TypeScript
es sumamente inteligente infiriendo los tipos de las variables, hay ocasiones en que esta tarea no es perfecta. En tu caso el único error que TypeScript
detecta es:
Argument of type '"list1"' is not assignable to parameter of type 'never'.
Intentando hacer push
de la cadena list1
en el array porque el mismo ha sido inferido como de tipo never
(si declaras el array con al menos una cadena dentro, este error desaparecerá porque será inferido de la manera correcta).
Una solución alternativa para que TypeScript
no infiera el array vacío como de tipo never
es cambiar la forma de declarar el mismo:
var array = [];
array.push({
name: 'hola',
list: new Array()
})
array[0].list.push('list1')
alert(array[0]['name'])
Como ves, el código es el mismo, pero esta vez TypeScript
ha inferido el array list
como de tipo any[]
y no lanza ningún error.
De todas maneras, no tiene sentido usar TypeScript
si no vas a usar sus características, y en este caso en particular, estamos hablando de una de las características más potentes que posee, que es el tipado de variables. Así que la mejor solución es especificar qué tipo de datos contendrán name
y list
en cada objeto del array. Esto lo puedes lograr, como ya te explicó @JoseVelasco, creando un type o una interface para declarar la forma de los objetos dentro de dicho array:
// Usando type
type Datos = {
name: string;
list: string[];
}
// Usando interface
interface Datos {
name: string;
list: string[];
}
const array: Datos[] = [];
En esta situación en particular (declarar la forma de un objeto), puedes usar type
o interface
a tu preferencia. Pero si deseas profundizar más en las diferencias entre ambos, te recomiendo leer este post de SO en inglés o este post de Medium que dejó el compañero @JoseVelasco en los comentarios, que aunque muy general, está en español y te puede dar una idea de sus diferencias.
Con este cambio, el código ya no te lanzará error, porque TypeScript
no ha tenido que inferir ninguna de las variables.
list: new Array()
podrías simplemente escribir list: []
. Ve esta regla de eslint para que veas las desventajas de ese modo.
Commented
el 16 oct. 2019 a las 14:41
list: []
es el origen del problema (es como está en el código del OP y TypeScript
lo infiere como never
), consulta los enlaces que dejé. Por supuesto la mejor solución si se va a usar TypeScript
es hacer uso de los tipos, pero en este caso en particular es un workaround para deshacerse del error.
Commented
el 16 oct. 2019 a las 14:47
TypeScript
(no tiene sentido usar TypeScript
si no se va a hacer uso de una de las cosas fundamentales que el mismo brinda). Gracias por la observación.
Commented
el 16 oct. 2019 a las 15:35
Sí tienes claro el tipo de propiedades de cada objeto que contendrá el array puedes definir un "type" específico. En el caso de tu código:
type dataObject = {
name: string;
list: Array<any>; // o Array<string> sí sólo va a contener cadenas de texto
}
var array: dataObject[] = []
En este caso sí intentas añadir una propiedad no definida en el tipo, recibirás el error pertinente. Por ejemplo, si tratas de añadir:
array.push({
'name': 'hola',
'surname': 'adios',
'list': []
})
Verás el error (vscode en mi caso):
Argument of type '{ 'name': string; 'surname': string; 'list': undefined[]; }' is not assignable to parameter of type 'dataObject'. Object literal may only specify known properties, and ''surname'' does not exist in type 'dataObject'.
Y en este caso tienes la opción de definirlo como 'opcional' de la siguiente forma:
type dataObject = {
name: string;
surname?: string;
list: Array<any>;
}
Espero que te sea de ayuda.
Hola puedes leer información detallada en este link
https://apiumhub.com/es/tech-blog-barcelona/como-migrar-de-javascript-a-typescript/
array: any = []
this.array.push({
'name': 'hola',
'list': []
});
this.array[0]['list'].push('list1')
alert(array[0]['name'])
JavaScript
es códigoTypeScript
por defecto, ya queTypeScript
es un subset deJavaScript
. Será mejor que aclares a qué te refieres con convertir el código. ¿Te da error? ¿quieres solo añadirle chequeo de tipos?