Gyakorlat – Felület kiterjesztése a TypeScriptben

Befejeződött

Az interfészek kiterjeszthetik egymást. Ez lehetővé teszi, hogy az egyik felület tagjait egy másikba másolja, így nagyobb rugalmasságot biztosít a felületek újrafelhasználható összetevőkre való elválasztásának módjában.

Ha egy felületet egy vagy több adapterrel bővít, a következő szabályok vonatkoznak:

• Az összes adapter összes szükséges tulajdonságát implementálnia kell.
• Két illesztőnek ugyanaz a tulajdonsága lehet, ha a tulajdonság neve és típusa pontosan megegyezik.
• Ha két adapter azonos nevű, de különböző típusú tulajdonsággal rendelkezik, de deklarálnia kell egy új tulajdonságot, hogy az eredményül kapott tulajdonság mindkét felület altípusa legyen.

Interfész kiterjesztése

Többféle desszertet hozhat létre a IceCream felületről (napda, turmix stb.), de mindegyiknek különböző tulajdonságai vannak a deklaráltakon IceCreamkívül. Bővítsük ki a felületet egy új, úgynevezett felülettel Sundae , és deklaráljuk a tulajdonságait.

1. Folytassa a projektet a Játszótéren.

2. Az interfész deklarációja IceCream alatt deklaráljon egy új felületet, amelynek az a neve Sundae , hogy extends az IceCream interfész. A Sundae felület négy új tulajdonságot tartalmaz:

   • sauce literál típusú 'chocolate' | 'caramel' | 'strawberry'
   • nuts típusú boolean (nem kötelező)
   • whippedCream típusú boolean (nem kötelező)
   • instructions típusú boolean (nem kötelező)

   interface Sundae extends IceCream {
       sauce: 'chocolate' | 'caramel' | 'strawberry';
       nuts?: boolean;
       whippedCream?: boolean;
       instructions?: boolean;
   }
   

3. Hiba jelenik meg az új felületen. A TypeScript azt észlelte, hogy mind a felületek, mind a IceCream Sundae felületek rendelkeznek egy úgynevezett tulajdonságokkal instructions, de különböző típusúak. A hiba megoldásához mindkét tulajdonságot azonos típusúvá kell tenniinstructions. string

4. Próbáljuk ki az új felületet úgy, hogy a változót myIceCream típusra Sundaemódosítjuk. Ez a hiba azt jelzi, hogy a"mártás" tulajdonság hiányzik a(z) "{ flavor: string; scoops: number; }" típusban, de a "Sundae" típusban szükséges. Négy új tulajdonságot adott hozzá a Sundae felülethez, de csak a mártási tulajdonságra volt szükség.

   let myIceCream: Sundae = {
       flavor: 'vanilla',
       scoops: 2
   }
   

5. Javítsa ki a hibát a szükséges tulajdonság hozzáadásával, valamint a használni kívánt választható tulajdonságok bármelyikével.

   let myIceCream: Sundae = {
       flavor: 'vanilla',
       scoops: 2,
       sauce: 'caramel',
       nuts: true
   }
   

6. Most próbálja meg implementálni az Sundae interfészt a tooManyScoops függvényben. Magának a függvénynek nem szabad hibákat látnia, de a függvény következő sorban való hívása hibát okoz. Ennek az az oka, hogy három szükséges paramétert vár. Javítsa ki a hibát, ha hozzáadja a sauce tulajdonságot a függvényhíváshoz.

   function tooManyScoops(dessert: Sundae) {
       if (dessert.scoops >= 4) {
           return dessert.scoops + ' is too many scoops!';
       } else {
           return 'Your order will be ready soon!';
       }
   }
   console.log(tooManyScoops({flavor: 'vanilla', scoops: 5, sauce: 'caramel'}));