TypeScript

[[oktatas:web:typescript|< TypeScript]] ====== TypeScript ====== * **Szerző:** Sallai András * Copyright (c) 2021, Sallai András * Szerkesztve: 2021, 2022, 2023 * 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.


console.log('Helló Világ');

Fordítsuk le JavaScript kódra: tsc app.ts Az eredmény egy app.js nevű fájl:


console.log('Helló Világ');

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.





    
    TypeScript

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**:


{
    "devDependecies": {
        "lite-server": "^2.5.4"
    }
}

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


{
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "lite-server"
    },
    "devDependecies": {
        "lite-server": "^2.5.4"
    }
}

A lite-server indítása: npm start ===== Projekt készítés =====


mkdir app01
cd app01
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:


{
    "compilerOptions": {
        "rootDir": "src"
    }
}

Készítsünk NodeJS projektet. npm init -y A keletkezett package.json fájt nyissuk meg.


 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
  }

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


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);

A deklarálás helyén nem kötelező definiálni az értéket:


var dec: number;
dec = 345;

Ha értéket adunk egy változónak, akkor nem kötelező a típust megadni:


var dec = 345;


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

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


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

A **toFixed()** fixpontos alakban adja vissza a számot:


let dec = 1.234567e+6;
console.log(dec.toFixed());

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


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));

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:


let dec = 12.34567;
console.log(dec.toLocaleString()); //12,346

Megadható a környezet:


let dec = 12.34567;
console.log(dec.toLocaleString('hu-HU')); //12,346

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:


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

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


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

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:


let dec1 = 12;
console.log(typeof dec1);

let dec2 = new Number(12);
console.log(typeof dec2);
console.log(typeof dec2.valueOf());

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


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


var nev: string = "János";

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


var letezik: boolean = true;
letezik = false;

==== Tömb ==== Számokat tartalmazó tömb:


let szamok: number[] = [];
szamok.push(12);
szamok.push(23);
szamok.push(18);
console.log(szamok[0]);

Karakterláncokat tartalmazó tömb:


let nevek: string[] = [];
nevek.push('János');
nevek.push('Béla');
nevek.push('Feri');
console.log(nevek[0]);

Kezdőérték:


let szamok: number[] = [35, 40, 50, 27];
szamok.push(12);
console.log(szamok[0]);

Különböző típusok:


const tomb: (Date| string[]) [] = [new Date(), new Date(), ["a", "b"]];

==== Tuple ==== A tuple esetén csak a megadott számú elem adható meg:


var szamtuple: [number, number, number];

Az értékek később megváltoztathatók:


let szamok: [number, number, number] = [35, 40, 50];
console.log(szamok[0]);
szamok[0] = 17;
console.log(szamok[0]);


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

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


let a: void = null;


function say(): void {
    console.log('Helló');
}

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


function mehet(): never {
    while(true) {
        console.log('végtelen');
    }
}

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


function valami(): never {
    throw new Error('Hiba!');
}

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


let a: void = null;
let b: never = null; //Ez le sem fordul

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


let a: string | number;
a = 30;
console.log(a);
a = 'ábécé';
console.log(a);

Logikai típus viszont már nem tehető bele. ==== Any ==== Bármilyen típus lehet benne:


let a: any;
a = 30;
console.log(a);
a = 'ábécé';
console.log(a);

==== Enum ====


enum SzovegesEnum {
    ValasztasA = "A",
    ValasztasB = "B",
}



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)


if(irany == Irany.Jobbra as number) { }



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)

==== Típuskényszerítés ==== A típus kényszerítést a <> jelekkel adjuk meg:


let a: any = 30;
let b =  a;
console.log(b);

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


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();

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


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();

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:


console.log(szam1);
var szam1 = 30;

Ha a let kulcsszót használjuk, akkor nem fordul le a program:


console.log(szam1);
let szam1 = 30;

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



// egy soros megjegyzés

var a = 35; // egy soros

/*
több
soros 
megjegyzés
*/

var b = 40;

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


let tortenet = true;
if (tortenet) {
  console.log('igaz');
}

Ellenben ág:


let tortenet = true;
if (tortenet) {
  console.log('igaz');
}else {
  console.log('hamis')
}

Több ág:


let szam: number = 35;
if (szam > 0) {
  console.log('pozitív');
}else if(szam < 0) {
  console.log('negatív');
}else {
  console.log('nulla');
}

Hármas operátor:


let szam: number = 30;
szam > 0 ? console.log('pozitív') : console.log('negatív vagy 0');

==== Switch ====



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;
    }
}

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


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


let szamok = [30, 35, 40];

for(let szam of szamok) {
    console.log(szam);
}


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


let i = 0;

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

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


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`;

A **tompa ékezetek** esetén változó behelyettesítést is használhatunk:


var fa: string = 'nyárfa';
var mondat3: string = `még zöldel a ${fa}`;
console.log(mondat3);

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:


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

Vizsgáljuk meg benne van-e egy karakterlánc a vizsgált karakterláncban:


var szo = 'szilva';
console.log(szo.includes('il'));

Nézzük meg, milyen indexnél kezdődik egy karakterlánc a vizsgált karakterláncban:


var szo = 'szilva';
console.log(szo.indexOf('il'));


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

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


function nevjegy() {
    console.log('Nagy János');
}

nevjegy();

De megadhatjuk, hogy nincs visszatérési értéke:


function nevjegy():void {
    console.log('Nagy János');
}

nevjegy();

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


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

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


let udvozles = function() {
    console.log('Szia');
}

udvozles();


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

console.log(osszegzes(30, 35));

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


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

showData('Nagy János');
showData('Nagy János', 'Szolnok');


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);

A szelekciót így is írhatjuk:


if (typeof c !== 'undefined') {

}

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


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

showData('Nagy János');
showData('Nagy János', 'Szolnok');

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


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

udvozles();


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

console.log(osszegzes(30, 35));

Ha csak egy utasítás van, a törzs rész egyszerűsíthető:


let osszegzes = (szam1: number, szam2: number):number => szam1 + szam2;

console.log(osszegzes(30, 35));

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


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

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

===== Függelék ===== ==== Űrlap tartalma ====


const input1 = document.getElementById("szam1")! as HTMLInputElement;

==== Példa ====





    
    


    Összeadó


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));
});

A generált kód:


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));
});

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