Představ si, že budeš programovat e-mailového klienta, třeba něco jako Gmail. K tomu bude zapotřebí vytvořit několik různých typů.
Založení projektu
- Pomocí vite si vytvoř vlastní nový projekt pomocí
npm create vite@latest posta. Jako framework vyberVanillaa jako jazyk vyberTypeScript. V tomto a dalším cvičení nebudeme React potřebovat. Stačí nám čistě typescriptový projekt, kde potřebné věci budeme vypisovat do konzole. - Úplně vymaž ukázkový kód v souboru
main.tsa přidej řádek:console.log('Pošta') - Smaž soubor
counter.ts. - Spusť skript
npm run deva přesvedč se v prohlížeči, že v konzoli je text "Pošta". Stránka bude prázdná bílá, to je v pořádku. - Vytvoř si soubor
email.tsa typy a funkce z následujících kroků vytvářej v něm. - Všechny typy (a později funkce) z tohoto souboru exportuj.
- Proměnné s konrétními hodnotami zakládej vždy v souboru
main.ts. Pokud budeš proměnné potřebovat nastavit typ, nejprve ho naimportuj ze souboruemail.ts.
Kontakt
Vytvoř interface EmailContact. Každý kontakt (to může být odesílatel nebo příjemce emailu) bude obsahovat celé jméno a emailovou adresu. Vlastnosti pojmenuj name a email.
V main.ts založ proměnnou s tímto typem a dej do ní nějakou hodnotu.
Zpráva
Následně vytvoř interface EmailMessage pro emailovou zprávu. Každá zpráva by měla obsahovat následující údaje:
id- číslofrom- odesílatel, typ emailový kontaktto- příjemce, může jich být více, půjde o pole emailových kontaktůcc- kopie, opět jich může být více, pole emailových kontaktůbcc- skrytá kopie, stejně jakoccsubject- předmět emailubody- obsah emailupriority- může nabývat hodnotlow,normalnebohigh(vytvoř si na to typPriority, který bude hodnotu omezovat na tyto tři možnosti)sendAt- datum, jako typ použijDates velkým "D" na začátkuisRead- boolean, říká, zda je zpráva přečtená
V main.ts založ proměnnou s tímto typem a dej do ní nějakou hodnotu.
Do vlastnosti sendAt vlož hodnotu new Date(), což bude aktuální datum a čas, nebo můžeš zkusit datum ve tvaru new Date('2025-12-24T18:30:00'), pokud bys chtěla vložit třeba datum štědrovečerní večeře.
Inbox
Jednotlivé e-mailové zprávy je potřeba mít uložené v poštovní schránce.
Vytvoř typ EmailInbox jako pole emailových zpráv
V main.ts vytvoř proměnnou s tímto typem a vlož do ní několik zpráv. Můžeš použít zprávy uložené v proměnných, které jsi vytvořila v předchozích krocích.
Bonus
Pokud se nudíš, můžeš zkusit doplnit následující:
- emaily mají přílohy, vytvoř si interface
EmailAttachment, který bude mít vlastnostifilename(jméno souboru)size(velikost v bytech)contentType, který bude obsahovat tzv. MIME type přiloženého souboru (viz. dokumentace MDN: Common Media Types)
- pokud chceš, můžeš použít union values type a
contentTypepřílohy omezit např. jen na obrázky GIF, JPEG, PNG a dokumenty DOCX a XLSX z Wordu a Excelu - do interface pro emailovou zprávu přidej vlastnost
attachmentsa nastav ji tak, že může obsahovat pole příloh