Ez a dokumentum egy előző változata!
Tartalomjegyzék
TypeScript
- Szerző: Sallai András
- Copyright © Sallai András, 2021
- 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.
Az ES6 szaványt támogatja. A TypeScript állományok kiterjesztése: .ts
Telepítés
npm install -g typescript
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
- TSLint
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 kel 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
Elkészül egy ilyen fájl:
- package.json
{ "name": "projekt01", "version": "1.0.0" "description": "", "main": "app.js" "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license: "ISC" }
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
{ "name": "projekt01", "version": "1.0.0" "description": "", "main": "app.js" "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license: "ISC", "devDependecies": { "lite-server": "^2.5.4" } }
Írjunk indítósort a package.json fájlba:
- package.json
{ "name": "projekt01", "version": "1.0.0" "description": "", "main": "app.js" "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "lite-server" }, "author": "", "license: "ISC", "devDependecies": { "lite-server": "^2.5.4" } }
A lite-server indítása:
npm start
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);
let dec = 300; console.log(dec.toExponential()); //1.234567e+6
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
var nev = "János"; var uzenet1 = "Üdvözöllek " + nev; var uzenet2 = 'Üdvözöllek ' + nev; var uzenet3 = `Üdvözöllek ${nev}`;
Logikai típus
var letezik: boolean = true; letezik = false;
Tömb
let szamok: number[] = []; szamok.push(12); szamok.push(23); szamok.push(18); console.log(szamok[0]);
let nevek: string[] = []; nevek.push('János'); nevek.push('Béla'); nevek.push('Feri'); console.log(nevek[0]);
let szamok: number[] = [35, 40, 50, 27]; szamok.push(12); console.log(szamok[0]);
const tomb: (Date| string[]) [] = [new Date(), new Date(), ["a", "b"]];
Tuple
var szamtuple: [number, number, number];
let szamok: [number, number, number] = [35, 40, 50]; console.log(szamok[0]); szamok[0] = 17; console.log(szamok[0]);
Void
Az undefined altípusa. Nincs visszatérési érték.
Never
Sosem lesz visszatérési értéke.
function mehet(): never { while(true) { console.log('végtelen'); } }
A neve még null értéket sem vehet fel, szemben a void-el:
let a: void = null; let b: void = 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
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
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
function nevjegy() { console.log('Nagy János'); } nevjegy();
Paraméterek
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
- 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>
- 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)); });
A generált kód:
- 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)); });