TypeScript to potężne narzędzie, które wprowadza silne typowanie do ekosystemu JavaScript, ułatwiając tworzenie bardziej niezawodnych aplikacji. Jak w każdym języku, istnieją jednak dobre praktyki, które warto stosować od samego początku, aby pisać czytelny i efektywny kod. W tym artykule omówimy kluczowe wskazówki, które pomogą Ci unikać częstych pułapek i lepiej wykorzystać możliwości TypeScript.

Type any pozwala ominąć system typów w TypeScript, co może wydawać się kuszące, szczególnie w początkowych fazach nauki. Jednak any całkowicie usuwa korzyści wynikające z silnego typowania, które oferuje TypeScript. Staraj się go unikać, a zamiast tego korzystaj z bardziej precyzyjnych typów, takich jak unknown lub typów generycznych.

Zła praktyka:

let data: any = fetchData();

Lepsza praktyka:

let data: unknown = fetchData();

Jeśli jakaś zmienna lub właściwość obiektu nie powinna być modyfikowana, oznacz ją jako readonly lub używaj const. Pomaga to zabezpieczyć kod przed nieumyślnymi zmianami i sprawia, że jest bardziej czytelny.

Zła praktyka:

let user = { name: "John", age: 30 };
user.age = 31;

Lepsza praktyka:

const user: { readonly name: string; age: number } = { name: "John", age: 30 };
// user.name = "Doe";  // Błąd kompilacji!

Gdy tworzysz funkcje, możesz ustawić domyślne wartości dla argumentów, co pozwala uniknąć błędów w przypadku braku podania wartości podczas wywołania.

Przykład:

function greet(name: string = "Gość") {
  console.log(`Witaj, ${name}!`);
}

greet(); // Witaj, Gość!

Kiedy nie jesteś pewien typu zwracanego przez funkcję lub zewnętrzne API, lepiej użyć typu unknown, który wymusza dokładne sprawdzenie typu przed użyciem. To zabezpiecza przed błędami podczas pracy z dynamicznymi danymi.

Przykład:

function processData(input: unknown) {
  if (typeof input === "string") {
    console.log(input.toUpperCase());
  } else {
    console.log("Dane nie są ciągiem znaków.");
  }
}

Precyzyjne typowanie to klucz do pełnego wykorzystania możliwości TypeScript. Zamiast korzystać z ogólnych typów, takich jak string lub number, postaraj się jak najlepiej zdefiniować struktury danych w aplikacji.

Zła praktyka:

function getUser(id: string | number) {
  return { id, name: "John" };
}

Lepsza praktyka:

type UserID = string | number;

function getUser(id: UserID) {
  return { id, name: "John" };
}

Typy generyczne pomagają tworzyć elastyczne funkcje, które działają na różnych typach danych, jednocześnie zachowując bezpieczeństwo typów.

Przykład:

function identity(value: T): T {
  return value;
}

console.log(identity(42));    // 42
console.log(identity("Hello"));  // "Hello"

strict mode to ustawienie kompilatora TypeScript, które zapewnia bardziej rygorystyczne sprawdzanie typów i pomaga zapobiegać błędom. Warto go włączyć na początku każdego projektu.

Aby włączyć strict mode, dodaj poniższą opcję w pliku tsconfig.json

{
  "compilerOptions": {
    "strict": true
  }
}

Dobrym zwyczajem jest określanie typów zwracanych przez funkcje. Dzięki temu łatwiej jest zrozumieć, co dana funkcja robi, a kompilator TypeScript może skutecznie sprawdzić zgodność zwracanych wartości.

Przykład:

function add(a: number, b: number): number {
  return a + b;
}

Czasami typy mogą stać się zbyt skomplikowane i trudne do zrozumienia, co zmniejsza czytelność kodu. Jeśli zauważysz, że typy są zbyt złożone, warto rozważyć ich uproszczenie lub rozbicie na mniejsze elementy.

Przykład:

Zamiast tworzyć złożone struktury typów inline

function process(data: { id: number, name: string, email: string }): void {
  // ...
}

interface UserData {
  id: number;
  name: string;
  email: string;
}

function process(data: UserData): void {
  // ...
}

Na koniec warto wspomnieć o korzystaniu z odpowiednich narzędzi i rozszerzeń, które ułatwiają pracę z TypeScript. Korzystaj z edytorów, takich jak Visual Studio Code, który oferuje natywne wsparcie dla TypeScript z funkcjami takimi jak autouzupełnianie, podpowiedzi typów i natychmiastowe wykrywanie błędów. Zainstalowanie odpowiednich rozszerzeń zwiększy Twoją produktywność.

Powyższe najlepsze praktyki pomogą Ci pisać czysty, efektywny i bezpieczny kod w TypeScript. Kluczem jest unikanie nadmiernego korzystania z any, precyzyjne typowanie zmiennych i funkcji, a także korzystanie z generyków i narzędzi wspomagających pracę. Dzięki tym technikom z łatwością wykorzystasz pełen potencjał TypeScript, nawet jako początkujący programista.

Jeżeli seria wpisów dotycząca TypeScript była dla Ciebie pomocna, pozwoliła Ci rozwinąć obecne umiejętności lub dzięki niej nauczyłeś się czegoś nowego... będę wdzięczny za wsparcie w każdej postaci wraz z wiadomością, którą będę miał przyjemność przeczytać.

Z góry dziekuje za każde wsparcie - i pamiętajcie, wpisy były, są i będą za darmo!