Tesztkörnyezet – Típustípusok használata a TypeScriptben

Befejeződött

Ebben a laborban a JavaScriptet a TypeScriptben az alábbi gyakorlatok mindegyikében meg fogja írni, és erősen beírja az egyes változókat.

1. gyakorlat: Meglévő JavaScript-kód módosítása erősen gépelt változókhoz

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-02/m02-start
   code .
   

2. Nyissa meg a fájlmodul02.ts fájlt , és keresse meg az 1. gyakorlatot.

3. Módosítsa a kódot úgy, hogy típusokat adjon hozzá a változódeklarációkhoz. A lefordított JavaScript-kódnak ugyanúgy kell kinéznie, mint az eredeti példának, amikor elkészült.

   /*  EXERCISE 1
       TODO: Modify the code to add types to the variable declarations. 
       The resulting JavaScript should look the same as the original example when you're done. */
   
   let firstName;
   let lastName;
   let fullName;
   let age;
   let ukCitizen;
   
   firstName = 'Rebecca';
   lastName = 'Smith';
   age = 42;
   ukCitizen = false;
   fullName = firstName + " " + lastName;
   
   if (ukCitizen) {
       console.log("My name is " + fullName + ", I'm " + age + ", and I'm a citizen of the United Kingdom.");
   } else {
       console.log("My name is " + fullName + ", I'm " + age + ", and I'm not a citizen of the United Kingdom.");
   }
   

2. gyakorlat: Meglévő JavaScript-kód módosítása, amely biztosítja a működési eredményeket erősen beírt változók használatával

1. Keresse meg a 2. gyakorlatot a module02.ts-ben.

2. Típusok használatával biztosíthatja a művelet kimenetelét. Futtassa a kódot úgy, ahogy van, majd módosítsa úgy, hogy erősen gépelt változókkal rendelkezzen.

3. A talált hibák elhárítása, hogy a visszaadott eredmény a következő legyen 12: .

   /* EXERCISE 2
      TODO: Run the code as is and then modify it to have strongly typed variables. 
      Then, address any errors you find so that the result returned to a is 12. */
   
   let x;
   let y;
   let a;
   
   x = 'five';
   y = 7;
   a = x + y;
   
   console.log(a);
   

3. gyakorlat: Számtípus implementálása

1. Keresse meg a 3. gyakorlatot a module02.ts-ben.

2. Implementál egy olyan típust enum Season, amely az ", ", "Spring"és "Summer" állandókat "Fall""Winterjelöli.

3. Frissítse a függvényt úgy, hogy a szezonban például a enumSeason.Fallliterális sztring "Fall"helyett egy elemre hivatkozzon.

   /* EXERCISE 3
      TODO: In the following code, implement an enum type called Season that represents 
      the constants "Fall", "Winter", "Spring", and "Summer". Then, update the function so 
      you can pass in the season by referencing an item in the enum, for example 
      Season.Fall, instead of the literal string "Fall". */
   
   function whichMonths(season) {
       let monthsInSeason: string;
       switch (season) {
           case "Fall":
               monthsInSeason = "September to November";
               break;
           case "Winter":
               monthsInSeason = "December to February";
               break;
           case "Spring":
               monthsInSeason = "March to May";
               break;
           case "Summer":
               monthsInSeason = "June to August";
       }
       return monthsInSeason;
   }
   
   console.log(whichMonths("Fall"));
   

4. gyakorlat: Tömbtípus deklarálása

1. Keresse meg a 4. gyakorlatot a module02.ts-ben.

2. Deklarálja a tömböt a tömb elemeinek típusának megfelelő típusként.

   /* EXERCISE 4
      TODO: Declare the array as the type to match the type of the items in the array. */
   
   let randomNumbers;
   let nextNumber;
   for (let i = 0; i < 10; i++) {
       nextNumber = Math.floor(Math.random() * (100 - 1)) + 1;
       randomNumbers.push(nextNumber);
   }
   
   console.log(randomNumbers);
   

Kihívás magadnak!

Egy újabb feladathoz vegyen fel néhány meglévő JavaScriptet, amelyet esetleg írt, vagy amelyeket a weben talál, és írja át az alaptípusokat a TypeScript használatával. 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 ../m02-end
code .

Nyissa meg a fájlmodul02.ts fájlt a labor megoldásának megtekintéséhez.