2

¿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'])
4
  • 1
    Seria mejor primero que quieres intentar con ese javascript, asi se puede definir mejor la solucion en Typescript Commented el 15 oct. 2019 a las 21:08
  • Lo tengo, leeré el objetivo del sitio web
    – sYsTeM
    Commented el 15 oct. 2019 a las 21:23
  • Hola @sYsTeM, todo código JavaScript es código TypeScript por defecto, ya que TypeScript es un subset de JavaScript. Será mejor que aclares a qué te refieres con convertir el código. ¿Te da error? ¿quieres solo añadirle chequeo de tipos?
    – ElChiniNet
    Commented el 15 oct. 2019 a las 21:48
  • No obtengo ningún error en el código anterior, solo estoy tratando de "push" y "alert", pero en TypeScript es diferente cuando trabajo con tipos
    – sYsTeM
    Commented el 15 oct. 2019 a las 21:50

3 respuestas 3

6

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.

6
  • En lugar de usar list: new Array() podrías simplemente escribir list: []. Ve esta regla de eslint para que veas las desventajas de ese modo.
    – devconcept
    Commented el 16 oct. 2019 a las 14:41
  • @devconcept 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.
    – ElChiniNet
    Commented el 16 oct. 2019 a las 14:47
  • Correcto pero el punto de usar Typescript no es deshacerse del error creando otro problema nuevo sino crear tipado fuerte y manejar el error apropiadamente sin crear nuevos errores potenciales. Lo que quiero decir es que deberías hacer explicito que esa no es la forma recomendable de hacerlo sino la segunda que especificas en la respuesta.
    – devconcept
    Commented el 16 oct. 2019 a las 15:28
  • @devconcept: Intentaré modificar la respuesta más tarde para que no se vaya a interpretar que no recomiendo usar el tipado en 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.
    – ElChiniNet
    Commented el 16 oct. 2019 a las 15:35
  • Chapó por la explicación ElChiniNet, solo podría añadir un enlace donde se explica la diferencia entre 'interface' y 'type' ya que, aunque se usan de manera muy parecida, poseen diferentes características. Link al artículo Commented el 16 oct. 2019 a las 18:18
2

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.

1

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'])
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.