2. diel - Funkcie v TypeScriptu

Dnes sa pozrieme na funkcie, ktoré sa od klasického JavaScriptu príliš nelíši.

Funkcie

Funkcie v TypeScriptu sa prakticky nelíši od tých z JavaScriptu až na jednu vec, a to je typovanie. U funkcie v TypeScriptu sa typu Jak parameter funkcie, tak jej výstup. A to aj v prípade, že funkcia žiadny výstup nemá. Typovanie nemusíme používať, ale to by bola hlúposť, keďže ide o silnú zbraň TypeScriptu.

Typovanie

Pre začiatok si napíšeme úplne základnú metódu na sčítanie dvoch čísel bez typovanie:

function sečti(x, y) {
  return x + y;
}

Môžeme vidieť, že by človek nepoznal rozdiel medzi TypeScriptem a JavaScriptom.

Teraz ale využijeme typovanie a funkciu si prepíšeme tak, ako by mala vyzerať napísaná v TypeScriptu.

function add(x: number, y: number): number {
  return x + y;
}

Takto napísaná funkcie, vyzerá a slúži oveľa lepšie.

Niektorí by mohli namietať, že typovanie parametrov je zbytočné, ale má to tiež svoje výhody. Keď voláme metódu, hneď na prvý pohľad je jasné, čo metóda prijíma a vracia, bez toho aby sme čítali dokumentačné komentár. Tiež to má nespornú výhodu v tom, že nám TypeScript dokáže oznamovať chybu, keby sme napríklad vkladali dátový typ string do položky.

Voliteľné parametre

Za zmienku tiež stojí takzvané nepovinné (voliteľné) parametre. Hodí sa to najmä na metódy, ktoré vracia zrozumiteľný výsledok aj bez všetkých možných parametrov.

Ukážeme si to na tejto metóde:

function vratJmeno(jmeno: string, prijmeni: string): string {
  return jmeno + " " + prijmeni;
}

Povedzme, že je možné, aby človek nemal priezvisko. Lenže stále pri volaní tejto funkcie musíme vložiť parameter. Mohli by sme metódu napríklad využiť takto:

let celeJmeno = vratJmeno("Josef", NULL);

A práve od toho tu existujú voliteľné parametre. Našou metódu vratJmeno'() prerobíme tak, aby priezvisko nebolo povinné:

function vratJmeno(jmeno: string, prijmeni?: string): string {
  if (prijmeni)
    return jmeno + " " + prijmeni;
  else return jmeno;
}

Takto upravenú metódu môžeme zavolať nasledovne:

let celeJmeno = vratJmeno("Josef");

Zariadili sme to pomocou znaku ? hneď za názvom premennej. Aby metóda fungovala správne vždy, musíme tiež trochu prerobiť telo metódy a overiť, či nám bol odovzdaný parameter prijmeni alebo nie.

Ďalším spôsobom, ako zariadiť voliteľné parametre, je preddefinovať parameter v hlavičke metódy:

function vratJmeno(jmeno: string, prijmeni = "Novák"): string {
  return jmeno + " " + prijmeni;
}

V parametroch metódy nemusíme ani definovať typ premennej prijmeni, pretože to robíme už priradením. Tiež odpadá kontrolovanie, či bolo priezvisko odovzdané, pretože sa nikdy nestane, že by metóda nemala priezvisko.

Ak teraz metódu zavoláme:

let celeJmeno = vratJmeno("Adam");

bude v premennej celeJmeno uložená hodnota Adam Novák.

Ľubovoľný počet parametrov

Čo keď budeme chcieť odovzdať viac parametrov, ale zároveň nebudeme vedieť, koľko ich bude? Samozrejme môžeme vytvoriť metódu v štýle:

function vratJmeno(param1?: string, param2?: param3?: string, param4?: string): string {
  //tělo metody
}

V tento moment môžeme vložiť pokojne až 4 parametre a niečo s nimi robiť. Čo keď budeme chcieť 50? Nie je asi moc dobré písať 50 parametrov do hlavičky metódy, že?

Možno už skúsenejší programátori v duchu kričí "POLE". Áno, skoro ste to uhádli, pretože sa jedná o veľmi podobný štýl zápisu. Lenže existuje ale ešte jedna možnosť:

function vratJmenoAVlastnosti(jmeno: string, ...vlastnosti: string[]): string {
  return jmeno + " je " + vlastnosti.join(", ");
}

Pomocou tých ... hovoríme, že vopred nevieme, koľko príde parametrov. A ako som hovoril, že sa jedná o podobný štýl zápise ako u poľa, všimnite si prítomných [], presne ako keby sme len prijímali obyčajné pole. Metódou join() si iba pomáhame spojiť jednotlivé stringy do jedného reťazca.

Ak vytvoríme takúto metódu, môžeme jej zavolať napríklad takto:

let vlastnostiCloveka = vratJmenoAVlastnosti("Petr", "laskavý", "vysoký", "hubený");

Výstup takéhoto kódu bude:

Petr je laskavý, vysoký, hubený

Preťažovaniu metódy

Pri písaní kódu sa môže stať, že jedna funkcia bude veľmi podobná druhej. Môžeme si ušetriť prácu tým, že funkciu takzvane preťažíme. To znamená, že budeme mať niekoľko hlaviček metód s rovnakým názvom, ale inými parametrami, ktoré do nej vkladáme. Pri písaní také funkcie musíme sami určiť, čo sa stane s rôznymi vstupmi:

function hledej(ulice: number, mesto: string): void;
function hledej(ulice: string, mesto: string): void;
function hledej(ulice, mesto): void {
    if (typeof ulice !== 'number') {
        console.log(`Adresa je ${ulice}, ${mesto}.`);
    } else if (typeof ulice !== 'string') {
        console.log(`${mesto} nemá ulice, ale číslo domu je ${ulice}.`);
    }
}

hledej('Kúpeľná', 'Mariánskej Kúpele'); // Adresa je Kúpeľná, Mariánské Lázně.
hledej(122, 'Králíikov'); // Králíčková nemá ulice, ale číslo domu je 122.

Ak niektorí z vás majú skúsenosti s preťažovaním funkcií z iných jazykov, možno ste teraz trochu zmätení. Hlavičky metód píšeme pod seba a dalo by sa povedať, že v našom prípade píšeme telo pre tri metódy zároveň. Preto musíme rozlíšiť o aký vstup sa jedná a podľa toho sa rozhodovať.

Dúfam, že sa vám problematika funkcií podarila pochopiť a týmto by som ukončil túto lekciu.