docLaboratorium 9
download 
Reklamacja Transkrypt
Laboratorium 9
Laboratorium 9 - TypeScript
https://www.typescriptlang.org/docs/tutorial.html
Zadanie 1 – Hello World
a) Tworzymy plik hello.ts, który korzystając z prostej funkcji wyświetli dowolny napis:
• w konsoli, uruchamiając w Node.js plik hello.js
ALBO
• w pliku HTML – trzeba dodać plik HTML i wczytać skrypt hello.js.
Kompilacja: tsc hello.ts
ALBO
zrobi to za nas edytor :)
Widać jakieś różnice między plikami TypeScript i JavaScript?
b) Do funkcji dodać parametr imie typu string i wyświetlić odpowiednie przywitanie. Kompilator
powinien zastosować kontrolę typów (dla imienia 123 będzie błąd :)
Zadanie 2 – funkcja, tablice, pętle
Napisać funkcję tabliczka() przyjmującą dwie tablice (typu string i number), która wyświetli jakby
tabliczkę mnożenia (bardziej chyba tabliczkę „złożenia”) z zawartości dwóch tablic. Przykładowo dla
tablic: ['as', 'Ala', 'kot'] oraz [1, 12, 9, 100] otrzymamy:
as1 as12 as9 as100
Ala1 Ala12 Ala9 Ala100
kot1 kot12 kot9 kot100
Wykorzystać dwa rodzaje pętli z TypeScript:
https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html
Zadanie 3 – interfejs, pętla, odwrotny apostrof
• Utworzyć inferfejs Osoba zawierający trzy pola (imie, nazwisko, wiek) odpowiednich
typów.
• Utworzyć następnie tablicę trzech osób.
• Utworzyć funkcję osobyInfo() przyjmującą jeden parametr – tablicę zmiennych typu Osoba.
Funkcja ma zwracać napis (string) zawierający informację o wszystkich osobach.
Wykorzystać zapis odwrotnego apostrofu.
Wywołanie: console.log( osobyInfo(osoby) ); może zwrócić:
Osoba: Jan Kowalski ma 18 lat.
Osoba: Marek Pawlik ma 34 lat.
Osoba: Ludwika Marchewka ma 29 lat.
Zadanie 4 – klasa, metody dostępowe, …
• Utworzyć klasę Student zawierającą prywatne pola: imie, nazwisko, dataUr, opis.
• Warto skorzystać ze skróconego zapisu konstruktora: (private imie: string, ...)
• Do pól imie oraz nazwisko dodać metody dostępowe (set i get).
• Utworzyć plik kompilacji tsconfig.json ustalając domyślnie kompilację na „es5”.
Przetestować tworząc obiekt klasy, zmieniając zawartość nazwiska, wyświetlając obiekt w konsoli.
Do klasy dodać dwie publiczne metody:
• consoleLog() - wyświetla zawartość wszystkich atrybutów obiektu klasy w konsoli
• opisHTML() - zwraca ciąg znaków prezentujący ładny opis studenta (jakiś nagłówek,
paragraf …).
Przetestować dołączając zwrócony opis studenta to ciała dokumentu HTML.
Zadanie 5 – lista studentów
Rozwijamy zadanie poprzednie.
• Utworzyć tablicę trzech studentów, np.:
new Student('Robert','Kowalski','1992/02/28','Uzdolniony informatyk, szczególnie w ...'),
new Student('Zosia','Bak','1991/06/12','Szczególne zainteresowania: grafika komputerowa'),
new Student('Wojciech','Jablonski','1989/06/12','Trzeci raz powtarza 2 rok …')
•
Utworzyć klasę Grupa zawierającą:
◦ prywatne pole składowe przechowujące listę studentów danej grupy,
◦ konstruktor przyjmujący tablicę studentów, która będzie w danej grupie,
◦ metodę pokazListe() zwracającą listę studentów w HTML (tylko imię i nazwisko),
◦ metodę wybranyStudent(idStud) zwracającą obiekt wybranego studenta z tablicy
Utworzyć obiekt klasy Grupa i przetestować metody w pliku HTML.
Zadanie 6
Na jednej stronie HTML wyświetlić:
• listę studentów (na górze strony)
• opis tego studenta, którego kliknięto na liście (poniżej listy).
Wykorzystać odpowiednie metody utworzone wcześniej w obu klasach.
Po wczytaniu strony opis powinien być pusty. Przykład:
Można skorzystać z poniższego szablonu, choć pewnie większość z Państwa potrafi zrobić to
znacznie lepiej. Można użyć jQuery choć wystarczy JavaScript :)
<body>
<h1>Lista studentów</h1>
<div id="lista"></div>
<h1>Opis wybranego studenta</h1>
<div id="opis"></div>
<script src="zad56.js"></script>
<script>
startApp();
</script>
</body>
Zadanie 7 – TypeScript i Node.js – aplikacja konsolowa
• Do aplikacji w TypeScript z zadanie 6 dodać obsługę Node.js. Wykorzystać odpowiednie
definicje (*.d.ts) i dyrektywy kompilatora.
• Korzystając z modułu readline z Node.js utworzyć proste menu tekstowe, które pozwoli na
przegląd grupy studentów, modyfikację danych wybranego studenta i zapisanie ich do pliku
JSON o podanej nazwie.
Ewentualnie można zrobić to samo korzystając z formularzy HTML.
