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 ======

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

===== A TypeScriptről =====

A TypeScript a Microsoft által megalkotott programozási nyelv. 
A JavaScript egy szigorított részhalmazának is tekinthető.
A TypeScript segíti a programozót, hogy jobb kódot írjon.


{{:oktatas:web:typescript:ts_es6_es5.png?400|}}


A TypeScript nyelven írt kódot egy fordítóval JavaScript kódra
fordítjuk és így használjuk. 

A TypesSript programkódot .ts kiterjesztésű fájlba írjuk.

{{:oktatas:web:typescript:typescript.png|}}

Támogatja az ES6 szaványt.
A TypeScript állományok kiterjesztése: .ts




===== Helló világ =====

Írjunk egy app.ts nevű fájlban egy programot.

Írassuk ki a "Helló Világ" üzenetet.

<code typescript app.ts>
console.log('Helló Világ');
</code>


Fordítsuk le JavaScript kódra:

  tsc app.ts

Az eredmény egy app.js nevű fájl:

<code javascript app.js>
console.log('Helló Világ');
</code>


Futtatás:
  node app.js

Böngészőből is futtathatjuk ha készítünk egy weblapot, például
index.html néven. 

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title>TypeScript</title>
    <script src="app.js" defer></script>
</head>
<body>

</body>
</html>
</code>

A **script** elem **defer** attribútuma biztosítja, hogy a script csak a weblap betöltése után 
fusson le. A JavaScript kimenetét a fejlesztői felületen nézhetjük még: F12

===== lite-server =====

Használhatjuk a lite-server csomagot a weblap megtekintéséhez. 
Ehhez kezdésnek készítsük elő a projekt könyvtárat:

  npm init -y


Telepítsük a lite-server-t fejlesztéshez:
  npm install --save-dev lite-server

Telepítés után a **devDependencies** szekcióba bekerült a **lite-server**:


<code javascript package.json>
{
    "devDependecies": {
        "lite-server": "^2.5.4"
    }
}
</code>


Írjunk indítósort a **package.json** fájlba:

<code javascript package.json>
{
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "lite-server"
    },
    "devDependecies": {
        "lite-server": "^2.5.4"
    }
}
</code>


A lite-server indítása:
  npm start

===== Projekt készítés =====

<code>
mkdir app01
cd app01
code .
</code>

Ha beléptünk az app01 könyvtárba indítsuk el a **VSCodium** vagy a **VSCode** szerkesztőt.

Indítsunk egy terminált.

Ha készítünk az src könyvtárban egy app.ts könyvtárat lefordíthatjuk azt:
  tsc src/app.ts

Ha több .ts kiterjesztésű állományunk van, készítsük **tsconfig.json** beállítófájlt:

<code javascript>
{
    "compilerOptions": {
        "rootDir": "src"
    }
}
</code>


Készítsünk NodeJS projektet.

  npm init -y

A keletkezett **package.json** fájt nyissuk meg.

<code javascript>
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
  }
</code>

Írjunk egy build feladatot, majd használjuk így:
  npm build


===== Típusok =====

  * number
  * string
  * boolean
  * array
  * tuple
  * void
  * enum

A TypeScriptben úgynevezett **annotációval** jelöljük a változók, állandók, függvények, objektumok
típusát. A változó (vagy más dolog) után egy : (kettőspont) következik, utána jön a típus.


==== Számok ====

<code javascript>
var dec: number = 345;
var hex: number = 0xf7;
var bin: number = 0b0100;
var oct: number = 0o25;

console.log(dec);
console.log(hex);
console.log(bin);
console.log(oct);
</code>

A deklarálás helyén nem kötelező definiálni az értéket:
<code javascript>
var dec: number;
dec = 345;
</code>

Ha értéket adunk egy változónak, akkor nem kötelező a típust megadni:
<code javascript>
var dec = 345;
</code>



<code javascript>
let dec = 300;
console.log(dec.toExponential()); //1.234567e+6
</code>

==== Formázás ====


A **toExponential()** függvény egy szám hatványkitevős alakjával tér vissza. Megadható paraméter is, amely megmondja tizedespont után hány tizedesjegy jelenjen meg:

<code javascript>
let dec = 1234567;
console.log(dec.toExponential(1)); // 1.2e+6
console.log(dec.toExponential(2)); // 1.23e+6
console.log(dec.toExponential(3)); // 1.235+6
console.log(dec.toExponential(4)); // 1.2346e+6
console.log(dec.toExponential(5)); // 1.23457e+6
</code>


A **toFixed()** fixpontos alakban adja vissza a számot:
<code javascript>
let dec = 1.234567e+6;
console.log(dec.toFixed());
</code>


A **toFixed()** fixpontos számok alakítására is használható.
Egy paraméterrel szabályozhatom a tizedesjegyek számát:

<code javascript>
let dec = 12.34567;
console.log(dec.toFixed());
console.log(dec.toFixed(1));
console.log(dec.toFixed(2));
console.log(dec.toFixed(3));
console.log(dec.toFixed(4));
</code>

A **toLocaleString()** a helyi területi beállításoknak megfelelően 
adja vissza a számot. Magyar nyelvű környezetben a tizedpont
helyett tizedes vesszőt ír:

<code javascript>
let dec = 12.34567;
console.log(dec.toLocaleString()); //12,346
</code>


Megadható a környezet:
<code javascript>
let dec = 12.34567;
console.log(dec.toLocaleString('hu-HU')); //12,346
</code>

A **toPrecision()** függvény hatványkitevős vagy fixpontos alakban ad vissza egy számot.
Paraméterként megadható a visszadott számjegyek száma:

<code javascript>
let dec = 123.4567;
console.log(dec.toPrecision(1)); // 1e+2
console.log(dec.toPrecision(2)); // 1.2e+2
console.log(dec.toPrecision(3)); // 123
console.log(dec.toPrecision(4)); // 123.5
console.log(dec.toPrecision(5)); // 123.46
console.log(dec.toPrecision(6)); // 123.457
</code>


A **toString()** szöveggé alakítja a számot. Paraméterként megadható milyen
számrendszerbe adja vissza az értéket:

<code javascript>
let dec = 12;
console.log(dec.toString());    // 12
console.log(dec.toString(2));   // 1100
console.log(dec.toString(5));   // 22
console.log(dec.toString(8));   // 14
console.log(dec.toString(12));  // 10
console.log(dec.toString(16));  // c
</code>

A **valueOf()** függvény visszatér egy szám primitív értékével. 
Vegyünk fel egy számot objektumként a **Number()** konstruktorral, 
majd nézzük meg a típusát:

<code javascript>
let dec1 = 12;
console.log(typeof dec1);

let dec2 = new Number(12);
console.log(typeof dec2);
console.log(typeof dec2.valueOf());
</code>


==== Szöveg ====
Szöveges literálisok létrehozhatók idézőjellel, aposztróffal és ferde aposztróffal (AltGr+7; tompa ékezet). 

<code javascript>
var nev = "János";
var uzenet1 = "Üdvözöllek " + nev;
var uzenet2 = 'Üdvözöllek ' + nev;
var uzenet3 = `Üdvözöllek ${nev}`;
</code>



<code javascript>
var nev: string = "János";
</code>

==== Logikai típus ====

<code javascript>
var letezik: boolean = true;
letezik = false;
</code>


==== Tömb ====
Számokat tartalmazó tömb:
<code javascript>
let szamok: number[] = [];
szamok.push(12);
szamok.push(23);
szamok.push(18);
console.log(szamok[0]);
</code>

Karakterláncokat tartalmazó tömb:
<code javascript>
let nevek: string[] = [];
nevek.push('János');
nevek.push('Béla');
nevek.push('Feri');
console.log(nevek[0]);
</code>

Kezdőérték:
<code javascript>
let szamok: number[] = [35, 40, 50, 27];
szamok.push(12);
console.log(szamok[0]);
</code>


Különböző típusok:
<code javascript>
const tomb: (Date| string[]) [] = [new Date(), new Date(), ["a", "b"]];
</code>


==== Tuple ====

A tuple esetén csak a megadott számú elem adható meg:
<code javascript>
var szamtuple: [number, number, number];
</code>

Az értékek később megváltoztathatók:
<code javascript>
let szamok: [number, number, number] = [35, 40, 50];
console.log(szamok[0]);
szamok[0] = 17;
console.log(szamok[0]);
</code>

<code javascript>
var szamoktuple : [number, number, number];
szamoktuple = [35, 40, 50];
szamoktuple = [22, 17, 82];
console.log(szamoktuple);
</code>


==== Void ====

Az undefined altípusa. Nincs visszatérési érték.

<code javascript>
let a: void = null;
</code>


<code javascript>
function say(): void {
    console.log('Helló');
}
</code>

==== Never ====

A függvény végét sosem érjük el, sosem lesz visszatérési értéke.

<code javascript>
function mehet(): never {
    while(true) {
        console.log('végtelen');
    }
}
</code>

Kétféle függvényben használható:
  * végtelen ciklus
  * a függvény hibát dob


<code javascript>
function valami(): never {
    throw new Error('Hiba!');
}
</code>



A never még null értéket sem vehet fel, szemben a void-el:

<code javascript>
let a: void = null;
let b: never = null; //Ez le sem fordul
</code>

==== Union ====
Egyszerre két típust is megadhatunk, ez lesz az Union típus.

<code javascript>
let a: string | number;
a = 30;
console.log(a);
a = 'ábécé';
console.log(a);
</code>

Logikai típus viszont már nem tehető bele.

==== Any ====

Bármilyen típus lehet benne:

<code javascript>
let a: any;
a = 30;
console.log(a);
a = 'ábécé';
console.log(a);
</code>

==== Enum ====

<code javascript>
enum SzovegesEnum {
    ValasztasA = "A",
    ValasztasB = "B",
}
</code>

<code javascript>

enum Irany {
    Fel,
    Le,
    Balra,
    Jobbra
}

var irany: Irany = Irany.Balra;

if(irany as Irany == Irany.Jobbra) {
    console.log('az irány jobb')
}else {
    console.log('Az irány  más');
}

console.log(typeof irany)
</code>

<code javascript>
if(irany == Irany.Jobbra as number) { }
</code>

<code javascript>

enum Irany {
    Fel = 'fel',
    Le = 'le',
    Balra = 'balra',
    Jobbra = 'jobbra'
}

var irany: Irany = Irany.Balra;

if(irany == Irany.Jobbra as string) {
    console.log('az irány jobb')
}else {
    console.log('Az irány  más');
}

console.log(typeof irany)

</code>

==== Típuskényszerítés ====

A típus kényszerítést a <> jelekkel adjuk meg:

<code javascript>
let a: any = 30;
let b = <number> a;
console.log(b);
</code>


===== Változók és állandók =====

  * var - élettartama blokkon belül és globálisan is érvényes
  * let - élettartama csak adott blokkon belül érvényes
  * const - mint a let, de csak egyszer inicializálható

A változók és az állandók neveire a következő szabályok
vonatkoznak:
  * az ábécé kis- és nagybetűiből állhatnak
  * nem kezdődhet számjeggyel
  * lehet benne speciális karakter, például @, $ stb.


<code javascript>
let szam1 = 30;
function szamit() {
    if(szam1>10) {
      let szam2 = 35;
      console.log(szam2);
    }
    while(szam1 < 35) {
      let szam4 = 40;
      console.log(szam4);
      szam1++;
    }
    console.log(szam1);
    //Hibás, mivel ebben a hatókörben nincs szam2:
    //console.log(szam2);
    //Hibás, mivel ebben a hatókörben nincs szam4:
    // console.log(szam4);

}
szamit();
</code>

Ha var deklarációra cserélem a változókat, működik:

<code javascript>
var szam1 = 30;
function szamit() {
    if(szam1>10) {
      var szam2 = 35;
      console.log(szam2);
    }
    while(szam1 < 35) {
      var szam4 = 40;
      console.log(szam4);
      szam1++;
    }
    console.log(szam1);
    
    console.log(szam2);
    
    console.log(szam4);

}
szamit();
</code>


Ha egy változót nem deklarálunk, akkor hibát ad a fordító.
Ha utólag deklaráljuk var kulcsszóval, akkor nem kapunk hibát, 
de a kiíratás eredménye undefined:
<code javascript>
console.log(szam1);
var szam1 = 30;
</code>


Ha a let kulcsszót használjuk, akkor nem fordul le a program:
<code javascript>
console.log(szam1);
let szam1 = 30;
</code>


===== Megjegyzés =====

<code javascript>

// egy soros megjegyzés

var a = 35; // egy soros

/*
több
soros 
megjegyzés
*/

var b = 40;
</code>

===== Szelekció =====

<code javascript>
let tortenet = true;
if (tortenet) {
  console.log('igaz');
}
</code>

Ellenben ág:
<code javascript>
let tortenet = true;
if (tortenet) {
  console.log('igaz');
}else {
  console.log('hamis')
}

</code>

Több ág:
<code javascript>
let szam: number = 35;
if (szam > 0) {
  console.log('pozitív');
}else if(szam < 0) {
  console.log('negatív');
}else {
  console.log('nulla');
}
</code>


Hármas operátor:
<code javascript>
let szam: number = 30;
szam > 0 ? console.log('pozitív') : console.log('negatív vagy 0');
</code>

==== Switch ====

<code javascript>

let szam: number = 1;

switch(szam) {
    case 1: {
        console.log('egy');
        break;
    }
    case 2: {
      console.log('kettő');
      break;
    }
    default: {
        console.log('ismeretlen szám');
        break;
    }
}

</code>

===== Iteráció =====

<code javascript>
for(let i=0; i<5; i++) {
    console.log(i);
}
</code>


<code javascript>
let szamok = [30, 35, 40];

for(let szam of szamok) {
    console.log(szam);
}
</code>


<code javascript>
let i: number = 0;
while (i<5) {
    console.log(i);
    i++;
}
</code>


<code javascript>
let i = 0;

do {
    console.log(i);
    i++;
}while(i<5);
</code>


===== Szövegkezelés =====

Karakterláncokat megadhatunk **aposztrófok**, **idézőjelek** és
**tompa ékezetek** között (AltGr+7): 

<code javascript>
var mondat1: string = 'még nyílnak a völgyben';
var mondat2: string = "a kerti virágok";
var mondat3: string = `még zöldel a nyárfa`;
</code>


A **tompa ékezetek** esetén változó behelyettesítést is használhatunk: 
<code javascript>
var fa: string = 'nyárfa';
var mondat3: string = `még zöldel a ${fa}`;
console.log(mondat3);
</code>

A karakterláncokon futtathatunk függvényeket, amelyek
a valamilyen műveletet végeznek az értéken.


Példaként vegyük egy karakterlánc egyetlen karakterét,
az index hivatkozásával:
<code javascript>
var szo = 'szilva';
console.log(szo.charAt(0)); // s betűvel tér vissza
console.log(szo.charAt(1)); // z betűvel tér vissza
</code>

Vizsgáljuk meg benne van-e egy karakterlánc a vizsgált karakterláncban:
<code javascript>
var szo = 'szilva';
console.log(szo.includes('il')); 
</code>


Nézzük meg, milyen indexnél kezdődik egy karakterlánc a vizsgált karakterláncban:
<code javascript>
var szo = 'szilva';
console.log(szo.indexOf('il')); 
</code>


További függvényeket az alábbi táblázatban találunk:

^  Szövegkezelő függvények  ^^
| charAt()  | adott indexű karakterrel tér vissza  |
| charCodeAt() |  |
| charPointAt()  | |
| concat()  | szövegek kombinációjával tér vissza  |
| endsWith() | |
| includes() | |
| indexOf()  | keresett rész első előfordulásának indexét adja  |
| lastIndexOf() | keresett rész utolsó előfordulásának indexe |
| localCompare() | |
| match()  | Mintaillesztés vizsgálat  |
| normalize()  |
| padEnd()  | |
| padStart()  | |
| repeat()  | |
| replace()  | szöveg cseréje  |
| search()  | |
| slice()  | |
| split()  | szövegdarabolása, eredmény tömbben  |
| startsWith() | |
| substr() | |
| substring() | |
| toLocaleLowerCase() | |
| toLocaleUpperCase() | |
| toLowerCase()  | szöveg kisbetűssé  |
| toUpperCase()  | szöveg nagybetűssé  |
| trim() | A white space karakter törlése a szöveg elejéről és végéről |
| trimLeft() | |
| trimRight() | |

===== Függvények =====

==== Szintaxis ====

<code>
function név(paraméter: típus, ...): visszatérés_típusa {
    //tennivalók
}
</code>

==== Nevesített függvény ====
Egy egyszerű függvény, ami nem ad vissza értéket és nincs bemenő paramétere
így is leírható:

<code javascript>
function nevjegy() {
    console.log('Nagy János');
}

nevjegy();
</code>


De megadhatjuk, hogy nincs visszatérési értéke:
<code javascript>
function nevjegy():void {
    console.log('Nagy János');
}

nevjegy();
</code>

==== Paraméterek ====

Vegyünk egy add() nevű függvényt, aminek két szám paramétere van:

<code javascript>
function add(szam1: number, szam2: number):number {
    return szam1 + szam2;
}
</code>


==== Névtelen függvény ====

<code javascript>
let udvozles = function() {
    console.log('Szia');
}

udvozles();
</code>


<code javascript>
let osszegzes = function(szam1: number, szam2: number):number {
    return szam1 + szam2;
}

console.log(osszegzes(30, 35));
</code>

==== Opcionális paraméter ====

Ha egy változó neve után ? (kérdőjel) teszünk, az a változó nem kötelező. 
Az alábbi függvénynek kötelező megadni nevet, de a várost nem.

<code javascript>
function showData(name: string, city?: string) {
    console.log(name);
    if (city !== undefined) {
      console.log(city);
    }
}

showData('Nagy János');
showData('Nagy János', 'Szolnok');
</code>


<code javascript>
let add = function (a: number, b: number, c?: number): number {
    if (c !== undefined) {
        return a + b + c;
    }
    return a + b;
};

let result = add(30, 35);
console.log(result);
</code>

A szelekciót így is írhatjuk:

<code javascript>
if (typeof c !== 'undefined') {

}
</code>
Ha a **typeof** operátort használjuk az undefined szót a idézőjelbe, aposztrófok vagy ferde aposztrófok közzé kell tenni.

  'undefined'
  "undefined"
  `undefined`


==== Alapértelmezett paraméter ====

<code javascript>
function showData(name: string, city: string = 'ismeretlen') {
    console.log(name + ' ' + city);
}

showData('Nagy János');
showData('Nagy János', 'Szolnok');
</code>

==== Nyílfüggvény ====

<code javascript>
let udvozles = () => {
    console.log('Szia');
}

udvozles();
</code>



<code javascript>
let osszegzes = (szam1: number, szam2: number):number => {
    return szam1 + szam2;
}

console.log(osszegzes(30, 35));
</code>



Ha csak egy utasítás van, a törzs rész egyszerűsíthető:
<code javascript>
let osszegzes = (szam1: number, szam2: number):number => szam1 + szam2;

console.log(osszegzes(30, 35));
</code>

==== Változó hosszúságú paraméterlista ====

A változó hosszúságú paramétereket a TypeScript **Rest** paraméternek nevezi.

<code javascript>
function kibarat(nev: string, ...baratok: string[]) {
    console.log(nev + ': '+ baratok.join(', '));
}

kibarat('János', 'Béla');
kibarat('Emes', 'Timi', 'Gabi', 'Pali');
</code>

===== Függelék =====

==== Űrlap tartalma ====

<code javascript>
const input1 = document.getElementById("szam1")! as HTMLInputElement;
</code>




==== Példa ====

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>Összeadó</h1>
    
    <input type="text" id="szam1">
    <input type="text" id="szam2">
    <button id="mehetGomb">Számít</button>

    <script src="script.js"></script>
</body>
</html>
</code>

<code javascript script.ts>
const mehetGomb = document.querySelector("#mehetGomb");
const input1 = document.getElementById("szam1")! as HTMLInputElement;
const input2 = document.getElementById("szam2")! as HTMLInputElement;

function add(szam1: number, szam2: number) {
    return szam1 + szam2;
}

mehetGomb.addEventListener("click", function() {
    console.log(add(+input1.value, +input2.value));
});

</code>


A generált kód:
<code javascript script.js>
var mehetGomb = document.querySelector("#mehetGomb");
var input1 = document.getElementById("szam1");
var input2 = document.getElementById("szam2");
function add(szam1, szam2) {
    return szam1 + szam2;
}
mehetGomb.addEventListener("click", function () {
    console.log(add(+input1.value, +input2.value));
});

</code>

==== A tsc paraméter ====

Windows alatt csak Git Bashben működik (ha az telepítve van):
  tsc src/*.ts

Megoldáshoz nézzük meg:
[[oktatas:web:typescript:typescript_tsconfig_beallitofajl#forras_es_celmegadas|Forrás és célmegadás]]


===== Források =====

  * https://www.typescriptlang.org/docs/ (2021)
    * https://www.typescriptlang.org/docs/handbook/compiler-options.html (2021)
  * https://www.tutorialspoint.com/typescript/index.htm (2021)
  * https://www.typescripttutorial.net/ (2021)
  * https://code.visualstudio.com/docs/typescript/typescript-tutorial (2021)
  * https://www.tutorialsteacher.com/typescript (2021)
  * https://www.javatpoint.com/typescript-types (2021)
  * https://www.educative.io/blog/typescript-tutorial (2021)
  * https://www.tutorialsteacher.com/typescript (2021)