Crear una matriz vacía en TypeScript

1. Crear un nuevo proyecto
2. Generar archivo de configuración de TypeScript
3. Crear un tipo de clase para la matriz
4. Use la declaración de tipo explícito para crear una matriz vacía en TypeScript
5. Use la aserción de tipo para crear una matriz vacía en TypeScript
6. Use el Array Constructor para crear una matriz vacía en TypeScript
7. Conclusión

La matriz es una estructura de datos que almacena elementos utilizando el enfoque lineal. Esto se debe a que el orden de los elementos es secuencial, y podemos acceder a los elementos anteriores y siguientes del elemento actual.

Las matrices se usan comúnmente cuando se desarrollan aplicaciones en comparación con otras estructuras de datos. Por ejemplo, cuando queremos obtener una colección de elementos de datos de una base de datos o un servicio y mostrarlos en una aplicación, generalmente usamos una matriz para lograrlo.

Primero declaramos una matriz para el tipo obtenido de la fuente y suscribimos la matriz a un observable. El observable agrega los elementos obtenidos de nuestra fuente a la matriz, y luego los elementos de la matriz se muestran en la aplicación.

Este tutorial nos mostrará cómo crear una matriz vacía en TypeScript que luego se puede llenar con datos.

Crear un nuevo proyecto

Abra WebStorm IDEA y seleccione Archivo > Nuevo > Proyecto. En el marco que se abre, seleccione la sección Node.js ubicada en el lado izquierdo del marco.

Cambie el nombre del proyecto de sin título a matriz vacía en la sección Ubicación en el lado derecho.

El entorno de ejecución node debe estar instalado antes de crear este proyecto para que las secciones Node interpreter y Package manager se puedan leer automáticamente desde el sistema.

Generar archivo de configuración de TypeScript

Una vez generado el proyecto, abra una nueva ventana de terminal usando el atajo ALT+F12 y use el siguiente comando para generar el archivo tsconfig.json.

~/WebstormProjects/empty-array$ tsc --init

Producción :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true
  }
}

Los únicos cambios que hemos realizado en el archivo de configuración son agregar la propiedad noEmitOnError: true que garantiza que no se genere ningún archivo JavaScript en caso de un error de transpilación.

Crear un tipo de clase para la matriz

Cree un archivo llamado Phone.js en la carpeta empty-array y copie y pegue el siguiente código en el archivo.

export class Phone{
    constructor(private id: number,
                private make: string,
                private name: string,
                private price: number) {
    }
}

En este código, hemos creado una clase llamada Teléfono que contiene las propiedades id, marca, nombre y precio. Utilizaremos esta clase como el tipo de nuestra matriz, pero seremos libres de usar cualquier tipo de datos, como una cadena o un número.

La palabra clave exportar indica que este archivo es un módulo, y la clase Teléfono se utilizará en otro módulo de la aplicación, como se muestra en la siguiente sección.

Use la declaración de tipo explícito para crear una matriz vacía en TypeScript

Cree un archivo llamado Main.js en la carpeta empty-array y copie y pegue el siguiente código en el archivo.

import {Phone} from "./Phone";

function usingExplicitType(): Phone[]{
    return [];
}

function main(){
    if (usingExplicitType().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

En este código, hemos creado un método llamado usingExplicitType() que devuelve una matriz de objetos de teléfono Phone[]. Dado que queremos devolver una matriz vacía, el código dentro del método devuelve una matriz vacía explícitamente sin crear ningún objeto.

Como sabemos que el método devuelve una matriz, podemos llamar a la propiedad longitud para verificar su longitud. Si la longitud de la matriz es igual a 0, entonces la matriz no tiene elementos.

Tenga en cuenta que hemos utilizado la palabra clave importar para utilizar la clase Teléfono en este módulo.

Para verificar que el código funciona como se espera, use el siguiente comando para ejecutar la función main() que define nuestra implementación concreta.

~/WebstormProjects/empty-array$ tsc && node Main.js

El comando tsc transpila el código TypeScript a código JavaScript, y el comando node ejecuta el archivo Main.js. Asegúrese de que la salida sea como se muestra a continuación.

The array has no phone instances

Use la aserción de tipo para crear una matriz vacía en TypeScript

Copie y pegue el siguiente código en el archivo Main.js después del método usingExplicitType().

function usingTypeAssertion(): Phone[]{
    return [] as Phone[]; // return <Phone[]>[];

}

function main(){
    if (usingTypeAssertion().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

En este código, hemos creado un método llamado usingTypeAssertion() que devuelve una matriz vacía de objetos de teléfono Phone[].

Este método utiliza la aserción de tipo para lograr nuestro objetivo de devolver una matriz vacía de objetos de teléfono. El tipo de aserción se indica mediante la palabra clave as.

El método main() funciona de la misma forma que el ejemplo anterior.

Ejecute este código con el comando utilizado en el ejemplo anterior y asegúrese de que el resultado sea el que se muestra a continuación.

The array has no phone instances

Use el Array Constructor para crear una matriz vacía en TypeScript

Copie y pegue el siguiente código en el archivo Main.js después del método usingTypeAssertion().

function usingArrayConstructor(): Phone[]{
    return new Array<Phone>();
}

function main(){
    if (usingArrayConstructor().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

En este código, hemos creado un método llamado usingArrayConstructor() que devuelve una matriz de objetos de teléfono Phone[] como lo hemos hecho en los ejemplos anteriores.

Dado que la matriz en TypeScript es un objeto, invocamos su constructor new Array<Phone>() usando la palabra clave new sin pasarle ningún elemento para devolver una matriz vacía. Tenga en cuenta que dado que la interfaz Array usa una de sus implementaciones genéricas para lograr esto, hemos pasado Phone como argumento del parámetro genérico para garantizar que solo se devuelvan objetos de teléfono vacíos.

Ejecute este código con el comando utilizado en el ejemplo anterior y asegúrese de que el resultado sea el que se muestra a continuación.

The array has no phone instances

Conclusión

Este tutorial nos enseñó cómo crear una matriz vacía en TypeScript. Los enfoques que hemos cubierto incluyen el uso de declaración de tipo explícita, aserción de tipo y un constructor de matriz.