TypeScript w praktyce. Na niepraktycznym przykładzie.

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.

Zapraszam do dołączenia do newslettera, dzięki któremu zyskasz dostęp do dodatkowych kursów oraz, co ważniejsze, możliwość oddania głosu na to jakie kolejne szkolenie mam przygotować dla uczestników newslettera.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *