W ostatniej części cyklu wprowadzającego do Typescript weźmiemy trochę rzeczy, o których traktowały poprzednie wpisy i zaimplementujemy prostą aplikację internetową.
I to właśnie sformułowanie „prostą aplikację internetową” czyni ten przykład… niepraktycznym. Mianowicie im projekt większy, tym więcej daje nam TypeScript z jego silnym typowaniem, generykami, interfejsami. Większość z tych rzeczy jest nadmiarowa przy prostych aplikacjach webowych, które spokojnie można tworzyć w JavaScript bez obawy jakiś drastycznych pomyłek czy zamotaną architekturę.
Stworzenie projektu
Tyle słowem wstępu, weźmy się do pracy. Naszym celem jest stworzenie prostej listy zadań do wykonania. Będą one przechowywane tylko na poziomie sesji, więc nie będziemy myśleć na chwilę obecną o persystencji danych.
Zaczniemy od utworzenia projektu – czyli komend
npm init npm install typescript --save-dev npx tsc --init
oraz utworzeniu nowego projektu w Visual Studio Code
Szkielet HTML
Tworzymy plik index.html, a w nim używamy skrótu html:5, by stworzyć szkielet strony. Co będzie nam potrzebne to input box do wprowadzenia rzeczy, którą mamy do zrobienia, oraz miejsca na listę.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>To Do</title>
</head>
<body>
<main>
<section>
<form>
<input
type="text"
id="todo-desc"
placeholder="Co masz do zrobienia..."
/>
<button id="todo-sub">Dodaj</button>
</form>
</section>
<section>
To do:
<ul id="todo-list"></ul>
</section>
</main>
</body>
</html>
Dodanie TypeScript do HTML
Stwórzmy plik App.ts, gdzie narazie dodamy tylko „hello world”
console.log("Hello World");
Gdybyśmy chcieli być koszerni to stworzylibyśmy skrypt TypeScript, następnie skompilowali i wynikowy plik .js dodali dopiero jako zależność w tagu <scripts>.
Na szczęście możemy mocno uprościć sobie życie korzystając z bardzo fajnego bundlera o nazwie Parcel
npm install parcel-bundler --save-dev
Teraz na końcu pliku index.html możemy odnieść się bezpośrednio do pliku App.ts
</main>
<script src="App.ts"></script>
</body>
</html>
i uruchomić nasz projekt za pomocą komendy
npx parcel index.html
Logika biznesowa w TypeScript
W pierwszej kolejności zaimplementujemy klase odpowiedzialną za wpisy ToDo. Będzie ona posiadała dwa pola – description czyli opis oraz pole typu boolean mówiące czy dany element został już wykonany.
export class ToDo {
description: string;
done: boolean;
constructor(description: string) {
this.description = description;
this.done = false;
}
complete(): void {
this.done = true;
}
}
Drugą klasą będzie ToDoRepository – czyli miejsce gdzie trzymane będą wszystkie wpisy ToDo.
import { ToDo } from "./ToDo";
export class ToDoRepository {
private todos: ToDo[] = [];
public addToDo = (description: string, uiNode: HTMLElement): void => {
console.log(`Added ${description} to ${JSON.stringify(this.todos)}`);
const toDo = new ToDo(description);
this.todos.push(toDo);
};
}
Finalnie dodamy App.ts, odpowiedzialne za podpięcie się do stosownych elementów HTML, dodanie listenerów.
import { ToDoRepository } from "./ToDoRepository";
const repo = new ToDoRepository();
const addButton: HTMLElement | null = document.getElementById("todo-sub");
const inputElement: HTMLElement | null = document.getElementById("todo-desc");
const todoList: HTMLElement | null = document.getElementById("todo-list");
if (addButton !== null && inputElement !== null && todoList !== null) {
addButton.addEventListener("click", (e: Event) => {
if (inputElement instanceof HTMLInputElement) {
e.preventDefault();
const newItem: HTMLElement = document.createElement("li");
repo.addToDo(inputElement.value);
todoList.appendChild(newItem);
}
});
}
Za pomocą komendy npx parcel .\src\index.html odpalamy naszą aplikację i powinniśmy mieć już możliwość dodawania nowych ToDo.
I na tym etapie możemy zakończyć ten prosty przykład, który będzie stanowił doskonałą bazę do dalszej przygody z Typescript i ReactJS.
Interesuje Cię TypeScript? Wprowadzenie do tego języka jest jednym z darmowych kursów dostępnych na kursy.clockworkjava.pl.