Anterior

Siguientes

Laboratorio: Conversión de tres funciones de TypeScript en una definición de clase

Completado

En este laboratorio, aplicará lo que ha aprendido sobre las clases para convertir una función de TypeScript en una clase.

Ejercicio 1: Conversión de tres funciones de TypeScript en una definición de clase

El siguiente código TypeScript contiene tres funciones:

• buildArray crea una matriz de números aleatorios únicos. Acepta un parámetro items que determina el número de elementos de la matriz y un parámetro sortOrder que especifica si la matriz se ordena en orden ascendente o descendente.
• sortDecending y sortAscending son funciones de comparación que indican al método sort() cómo ordenar los números en orden ascendente o descendente.

Convierta las funciones en una clase de TypeScript.

1. Escriba lo siguiente en el símbolo del sistema para clonar el repositorio de inicio.

   git clone https://github.com/MicrosoftDocs/mslearn-typescript
   cd mslearn-typescript/code/module-05/m05-start
   code .
   

2. Abra el archivo module05.ts. Este archivo contiene una clase vacía denominada BuildArray y las funciones buildArray, sortDecending y sortAscending.

3. Busque TODO Define the properties.

4. Defina las propiedades en la clase: _items y _sortOrder.

   // TODO Define the properties
   private _items: number;
   private _sortOrder: 'ascending' | 'descending';
   

5. Busque TODO Define the constructor.

6. Defina el elemento constructor para las propiedades.

   // TODO Define the constructor
   constructor (items: number, sortOrder: 'ascending' | 'descending') {
       this._items = items;
       this._sortOrder = sortOrder;
   }
   

7. Busque TODO Define the accessors.

8. Defina las propiedades de acceso que aplican get y set al valor de los parámetros items y sortOrder.

   // TODO Define the accessors
   get items() {
       return this._items;
   }
   set items(items) {
       this._items = items;
   }
   get sortOrder() {
       return this._sortOrder;
   }
   set sortOrder(sortOrder) {
       this._sortOrder = sortOrder;
   }
   

9. Busque TODO Define the methods.

10. Mueva las funciones sortAscending y sortDescending a la clase y convierta ambas en métodos private de la clase.

    // TODO Define the methods.
    private sortDescending = (a: number, b: number) => {
        if (a > b) {
            return -1;
        } else if (b > a) {
            return 1;
        } else {
            return 0;}
    }
    private sortAscending = (a: number, b: number) => {
        if (a > b) {
            return 1;
        } else if (b > a) {
            return -1;
        } else {
            return 0; }
    }
    

11. Mueva la función buildArray a la clase y conviértala en método public de la clase.

    buildArray(): number[] {
        let randomNumbers: number[] = [];
        let nextNumber: number;
        for (let counter = 0; counter < this.items; counter++) {
            nextNumber = Math.ceil(Math.random() * (100 - 1));
            if (randomNumbers.indexOf(nextNumber) === -1) {
                randomNumbers.push(nextNumber);
            } else {
                counter--;
            }
        }
        if (this._sortOrder === 'ascending') {
            return randomNumbers.sort(this.sortAscending);
        } else {
            return randomNumbers.sort(this.sortDescending);
        } 
    }
    

12. Busque TODO: Instantiate the BuildArray objects.

13. Actualice las declaraciones de variable testArray1 y testArray2 para crear instancias de nuevos objetos BuildArray.

    let testArray1 = new BuildArray(12, 'ascending');
    let testArray2 = new BuildArray(8, 'descending');
    

14. Pruebe el trabajo llamando al método buildArray en los objetos y devuelva los resultados a la consola.

    console.log(testArray1.buildArray());
    console.log(testArray2.buildArray());
    

¡Desafíese a sí mismo!

Si quiere enfrentarse a un desafío adicional, tome algún código de JavaScript que haya escrito o que encuentre en la Web y vuelva a escribirlo en TypeScript aplicando todo lo aprendido sobre las clases. Puede copiar y pegar el código de JavaScript en el área de juegos y editarlo o utilizar otro editor como Visual Studio Code.

Solución del laboratorio

Para ver la versión final del código, escriba lo siguiente en el símbolo del sistema.

cd ../m05-end
code .

Abra el archivo module05.ts para ver la solución a este laboratorio. Vea la sección Configuración del laboratorio más arriba para obtener más información sobre cómo configurar el entorno de desarrollo a fin de ejecutar la solución.

Continuar