szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » typescript » typescript_nyelv
Nyomvonal: • typescript_nyelv
oktatas:web:typescript:typescript_nyelv

Ez a dokumentum egy előző változata!

Tartalomjegyzék

< TypeScript

TypeScript

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

Rendszergazdaként: 

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

Források

oktatas/web/typescript/typescript_nyelv.1631736670.txt.gz · Utolsó módosítás: 2021/09/15 22:11 szerkesztette: admin

Eszközök az oldalon

Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki