Labor – Három TypeScript-függvény átalakítása osztálydefinícióvá

Befejeződött

Ebben a laborban az osztályokról tanultakat fogja alkalmazni egy TypeScript-függvény osztálysá alakításához.

1. gyakorlat: Három TypeScript-függvény átalakítása osztálydefinícióvá

A következő TypeScript-kód három függvényt tartalmaz:

• buildArray egyedi véletlenszerű számokból álló tömböt készít. Elfogad egy paramétert items , amely meghatározza a tömb elemeinek számát, és egy sortOrder paramétert, amely meghatározza, hogy a tömb növekvő vagy csökkenő sorrendben van-e rendezve.
• sortDecending és sortAscending azok az összehasonlító függvények, amelyekből megtudhatja, hogyan rendezheti a sort() számokat növekvő vagy csökkenő sorrendben.

Konvertálja a függvényeket TypeScript-osztálysá.

1. Klónozza a kezdő adattárat a parancssorba az alábbiak beírásával.

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

2. Nyissa meg a fájlmodul05.ts fájlt. Ez a fájl egy üres osztályt tartalmaz, BuildArray a , sortDecendingés sortAscending a buildArrayfüggvényeket.

3. Keresse meg a következőt TODO Define the properties: .

4. Adja meg a tulajdonságokat az osztályban: _items és _sortOrder.

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

5. Keresse meg a következőt TODO Define the constructor: .

6. Adja meg a constructor tulajdonságokat.

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

7. Keresse meg a következőt TODO Define the accessors: .

8. Határozza meg azokat a tartozékokat, set amelyek get és a sortOrder items paraméterek értéke.

   // 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. Keresse meg a következőt TODO Define the methods: .

10. Helyezze át az és sortDescending a sortAscending függvényeket az osztályba, és végezze el az osztály mindkét private metódusát.

    // 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. Helyezze át a függvényt buildArray az osztályba, és tegye public az osztály metódusává.

    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. Keresse meg a következőt TODO: Instantiate the BuildArray objects: .

13. Frissítse a testArray1 változó testArray2 deklarációit az új BuildArray objektumok példányosításához.

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

14. A munka teszteléséhez hívja meg a buildArray metódust az objektumokon, és adja vissza az eredményeket a konzolnak.

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

Kihívás magadnak!

Egy új feladathoz használjon néhány meglévő JavaScriptet, amelyet esetleg írt, vagy amelyeket a weben talált, és írja át a TypeScriptben az osztályokról tanultak alapján. Másolhatja és beillesztheti a JavaScriptet a Játszótérbe, és szerkesztheti, vagy használhat egy másik szerkesztőt, például a Visual Studio Code-ot.

Tesztkörnyezeti megoldás

A kód végleges verziójának megtekintéséhez írja be a következőt a parancssorba.

cd ../m05-end
code .

Nyissa meg a fájlmodul05.ts fájlt a labor megoldásának megtekintéséhez. A megoldás futtatásához a fejlesztői környezet beállításával kapcsolatos további információkért tekintse meg a fenti Tesztkörnyezet beállítási szakaszát.