TypeScript

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 2021, 2022, 2023
Licenc: 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.

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.

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

Telepítés

Globálisan:

npm install -g typescript

Linuxon rendszergazdai jog szükséges.

Verzió ellenőrzése:

tsc -v
Version 4.3.5

Fejlesztői környezet

Visual Studio Code

Bővítmények:
- ESLint
- Path Intellisense - fájlnevek kiegészítése
- Prettier

Helló világ

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

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

app.ts

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

Fordítsuk le JavaScript kódra:

tsc app.ts

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

app.js

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.

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>

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:

package.json

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

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

package.json

{
    "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",
}

Típuskényszerítés

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

let a: any = 30;
let b = <number> 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'));

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

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