Laboratorio: Conversión de tres funciones de TypeScript en una definición de clase
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ámetroitems
que determina el número de elementos de la matriz y un parámetrosortOrder
que especifica si la matriz se ordena en orden ascendente o descendente.sortDecending
ysortAscending
son funciones de comparación que indican al métodosort()
cómo ordenar los números en orden ascendente o descendente.
Convierta las funciones en una clase de TypeScript.
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 .
Abra el archivo module05.ts. Este archivo contiene una clase vacía denominada
BuildArray
y las funcionesbuildArray
,sortDecending
ysortAscending
.Busque
TODO Define the properties
.Defina las propiedades en la clase:
_items
y_sortOrder
.// TODO Define the properties private _items: number; private _sortOrder: 'ascending' | 'descending';
Busque
TODO Define the constructor
.Defina el elemento
constructor
para las propiedades.// TODO Define the constructor constructor (items: number, sortOrder: 'ascending' | 'descending') { this._items = items; this._sortOrder = sortOrder; }
Busque
TODO Define the accessors
.Defina las propiedades de acceso que aplican
get
yset
al valor de los parámetrositems
ysortOrder
.// 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; }
Busque
TODO Define the methods
.Mueva las funciones
sortAscending
ysortDescending
a la clase y convierta ambas en métodosprivate
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; } }
Mueva la función
buildArray
a la clase y conviértala en métodopublic
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); } }
Busque
TODO: Instantiate the BuildArray objects
.Actualice las declaraciones de variable
testArray1
ytestArray2
para crear instancias de nuevos objetosBuildArray
.let testArray1 = new BuildArray(12, 'ascending'); let testArray2 = new BuildArray(8, 'descending');
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.