szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:typescript|< TypeScript]]

====== TypeScript OOP ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2022, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Osztály =====


<code javascript>
class Dolgozo {
    nev: string;
    fiz: number;
}

let janos = new Dolgozo();
janos.nev = 'Nagy János';
janos.fiz = 2850000;

console.log(janos.nev, janos.fiz);
</code>


===== Konstruktor =====

<code javascript>
class Dolgozo {
    nev: string;
    fiz: number;
    constructor(nev: string, fiz: number) {
        this.nev = nev;
        this.fiz = fiz;
    }
}

let janos = new Dolgozo('Nagy János', 2850000);

console.log(janos.nev, janos.fiz);
</code>

Nem lehet több konstruktort megadni, de beállíthatók
opcionális paraméterek, így készíthetünk több alakú 
konstruktort. 

A metódusokat sem írhatjuk le többször,
de használhatjuk az opcionális paramétereket. 



===== Öröklés =====

<code javascript>
class Szemely {
    nev: string;
    constructor(nev: string) {
        this.nev = nev;
    }
}

class Dolgozo extends Szemely {
    fiz: number;
    constructor(nev: string, fiz: number) {
        super(nev);
        this.fiz = fiz;
    }
}

let janos = new Dolgozo('Nagy János', 2850000);

console.log(janos.nev, janos.fiz);

</code>

===== Absztrakt osztály =====

Nem példányosítható, csak öröklésre használható.
Az absztrakt osztályban előírhatók kötelezően megvalósítandó tulajdonságok és
metódusok.

<code javascript>
abstract class Szemely {
    nev: string;
    constructor(nev: string) {
        this.nev = nev;
    }
    abstract emelFizetes(number);
}

class Dolgozo extends Szemely {
    fiz: number;
    constructor(nev: string, fiz: number) {
        super(nev);
        this.fiz = fiz;
    }
    emelFizetes(mertek: number) {
      this.fiz = this.fiz + mertek;
    }
}

let janos = new Dolgozo('Nagy János', 2850000);
console.log(janos.nev, janos.fiz);

janos.emelFizetes(100000);
console.log(janos.nev, janos.fiz);
</code>


===== Tagok elérése =====

Elérés szabályozása:
  * public
  * private
  * protected
  * readonly

A protected hasonlít a private-hoz, de kivétel, hogy a származtatott osztályokban
elérhetők a tagok.


Nézzünk egy példát a private adattagra:

<code javascript>
class Dolgozo {
    private nev: string;
    fiz: number;
    constructor(nev: string, fiz: number) {
        this.nev = nev;
        this.fiz = fiz;
    }
    kerNev(): string {
      return this.nev;
    }
}

let janos = new Dolgozo('Nagy János', 2850000);
console.log(janos.kerNev(), janos.fiz);
</code>
A nev mező, csak a kerNev() metóduson keresztül érhető el.
A mező, ebben a formában nem kaphat új értéket. 

Vegyünk fel egy beállító metódust is: 
<code javascript>
class Dolgozo {
    private nev: string;
    fiz: number;
    constructor(nev: string, fiz: number) {
        this.nev = nev;
        this.fiz = fiz;
    }
    kerNev(): string {
      return this.nev;
    }
    allitNev(nev: string): void {
      this.nev = nev;
    }
}

let janos = new Dolgozo('Nagy János', 2850000);
console.log(janos.kerNev(), janos.fiz);
janos.allitNev('Kaland Ferenc');
console.log(janos.kerNev(), janos.fiz);
</code>

Most új értéket is beállíthatunk a nev mező számára.

===== Statikus tagok =====

Ha olyan osztályunk van, amiből csak egy dolgot reprezentálhat
a valóságból, akkor érdemes statikus tagokat használni. 

A következő példában egy saját matematikai osztályt deklarálunk.
Mivel matematikából csak egy van, a példányosításnak nincs
sok értelme. Ezért a PI mező statikusra állítjuk be, így
a mező értékére példányosítás nélkül hivatkozhatunk, csak
az osztály nevén keresztül:

<code javascript>
class SajatMath {
    static PI: number = 3.1415926535;
}

console.log(SajatMath.PI);
</code>

===== Interfész =====
==== Típusként ====

<code javascript>
interface Szemely {
    name: string;
    city: string;
}

var dolgozo: Szemely;
dolgozo.name = 'Pali';
dolgozo.city = 'Szeged';

</code>



<code javascript>
interface Szemely {
    name: string;
    city: string;
}

var dolgozo = <Szemely>{};
dolgozo.name = 'Pali';
dolgozo.city = 'Szeged';
</code>

==== Osztállyal ====

<code javascript>
interface Szemely {
    name: string,
    city: string,
    greet(): string
}

class Dolgozo implements Szemely {
    name: 'János';
    city: 'Szeged';
    greet():string {
        return 'Üdv';
    }
}

var mari: Dolgozo = new Dolgozo();
console.log(mari.greet());
</code>

===== Kivételek =====

<code javascript>
try {
    throw new Error('Hiba! valami elromlott');
}catch(e) {
    console.log(e);
}
</code>


<code javascript>
var num: number = -1;
try {
    if (num <0)
        throw new Error('Hiba! Negatív szám');
}catch(e) {
    console.log(e);
}
</code>

===== A get és a set  =====
==== Hagyományosan ====

<code javascript circle.ts>
class Circle {
    private _radius: number;

    constructor(radius: number) {
        this._radius = radius;
    }

    getRadius(): number {
        return this._radius;
    }

    setRadius(value: number) {
        if (value >= 0) {
            this._radius = value;
        } else {
            console.log("Invalid radius value.");
        }
    }
}

const myCircle = new Circle(5);
myCircle.setRadius(10);
console.log(myCircle.getRadius()); // Kimenet: 10

myCircle.setRadius(-5); // Kimenet: Invalid radius value.
console.log(myCircle.getRadius()); // Kimenet: 10
</code>

==== A get és set használata ====

<code javascript circle.ts>
class Circle {
    private _radius: number;

    constructor(radius: number) {
        this._radius = radius;
    }

    get radius(): number {
        return this._radius;
    }

    set radius(value: number) {
        if (value >= 0) {
            this._radius = value;
        } else {
            console.log("Invalid radius value.");
        }
    }
}

const myCircle = new Circle(5);
myCircle.radius = 10;
console.log(myCircle.radius);

myCircle.radius = -5; // Kimenet: Invalid radius value.
console.log(myCircle.radius);

</code>

Mi a különbség? Ugyanazt valósítják meg. Van aki szerint a get és a set használata átláthatóbbá és rugalmasabbá teszi a kódot.
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
