Gyakorlat – Felület deklarálása és példányosítása a TypeScriptben

  • 5 perc

Interfész deklarálásához kezdje a interface kulcsszóval, majd a felület nevével (az azonosítóval). Előfordulhat, hogy a felület neve nem szerepel a típusrendszer előre definiált típusnevei között. És konvenció szerint a felületnevek PascalCase-ben vannak.

Megjegyzés:

A TypeScript kódolási irányelvei azt javasolják, hogy a felületek ne a betűvel Ikezdődjenek.

Ezután adja meg a felület tulajdonságait (vagy tagjait) és típusát. A tulajdonságok kötelezőek, nem kötelezőek vagy csak olvashatók.

Tulajdonságtípus Leírás Példa
Szükséges Minden tulajdonság kötelező, kivéve, ha másként van megadva. firstName: string;
Választható Adjon hozzá kérdőjelet (?) a tulajdonságnév végéhez. Használja ezt a nem kötelező tulajdonságokhoz. Ez megakadályozza, hogy a típusrendszer hibát jelez, ha a tulajdonság nincs megadva. firstName?: string;
Csak olvasás Adja hozzá az olvasható kulcsszót a tulajdonság neve elé. Használja ezt olyan tulajdonságokhoz, amelyeket csak az objektum első létrehozásakor kell módosítani. readonly firstName: string;

Felület deklarálása a tagokkal

  1. Nyissa meg a Játszótért , és távolítsa el a meglévő kódot.

  2. Deklaráljon egy olyan felületetIceCream, amely két tulajdonságot tartalmaz: flavorstringscoopsnumber.

    interface IceCream {
   flavor: string;
   scoops: number;
}

  3. Most már implementálhatja az új felületet. Kezdjük azzal, hogy az IceCream interfészt típusként használjuk egy változó deklarációban. Deklaráljon egy típusnak IceCream nevezett myIceCream új változót, majd rendeljen értékeket a szükséges tulajdonságokhoz. Figyelje meg, hogy amikor elkezdi beírni a tulajdonságneveket, az Intellisense a megfelelő neveket és típusokat javasolja. Ellenőrizze a munkáját az érték konzolon való megjelenítésével.

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

console.log(myIceCream.flavor);

  4. Válassza a Futtatás lehetőséget. Figyelje meg, hogy az íz megjelenik a Napló ablakban.

  5. Ezután hozzunk létre egy függvényt az alján, amelynek neve tooManyScoops az interfészt IceCream használja paramétertípusként. Ez a függvény ellenőrzi a hatókörök számát az IceCream objektumban, és az eredmény alapján egy üzenetet ad vissza. A munka teszteléséhez adja át az objektumot {flavor: 'vanilla', scoops: 5} paraméterként, és ellenőrizze az eredményt a konzolra való visszatéréssel.

    function tooManyScoops(dessert: IceCream) {
   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}));

  6. Futtassa a kódot a Futtatás gombra kattintva. A kimenetnek így kell kinéznie.

    "vanilla"
"5 is too many scoops!"

  7. Nyissa meg a JavaScript panelt, és figyelje meg a JavaScript-kód és a TypeScript-kód közötti különbségeket. A felületnek nincs ábrázolása a JavaScript-kódban.

  8. Mi történik, ha egy másik tulajdonságot ad hozzá a IceCream felülethez? Adjunk hozzá egy új, hívott instructions tulajdonságot, és rendeljük hozzá a típushoz string .

  9. Tekintse át a kódban megjelenő hibákat. A feloldásukhoz vegye fel a instructions tulajdonságot a változódeklaráció implementálási részleteibe, és adja hozzá a függvénynek átadott paraméterként. Egyelőre tegye a instructions tulajdonságot opcionálissá egy kérdőjel hozzáadásával a tulajdonság nevéhez. Az összes hibát meg kell oldani, mert a instructions tulajdonságra már nincs szükség a felület számára.

Eddig jó! De a fagylalt napozás nélkül csak fagylalt. Következő lépésként áttekintjük, hogyan bővíthető az interfész.