Dlaczego .at() jest lepsze od [] do dostępu do tablic w TypeScript

Podczas uzyskiwania dostępu do danych tablicy w TypeScript, a nawet JavaScript, najczęściej używaną metodą jest notacja nawiasowa: []. Choć to oczywiście działa, istnieje lepsze rozwiązanie, zwłaszcza gdy zależy nam na bezpieczeństwie typów: metoda .at(). Może być mniej znana, ponieważ została wprowadzona stosunkowo niedawno w ECMAScript 2022, jednak w rzeczywistości jest bezpieczniejsza i bardziej intuicyjna. Zanurzmy się w szczegóły i sprawdźmy, jakie oferuje korzyści.

Różnica typów

Kluczowa różnica polega na tym, jak każda z metod obsługuje typy:

• notacja nawiasowa []: Zawsze zwraca typ string
• metoda tablicy .at(): Zawsze zwraca typ string | undefined

Spójrzmy na przykład:

   const pkmn = ["Pikachu", "Charizard", "Mew"];
   const pika = pkmn[0]
   const pikaAt = pkmn.at(0)

Tutaj nie zobaczysz jeszcze różnicy, ponieważ obie metody zwrócą „Pikachu”. Jednak wszystko zmienia się, gdy użyjesz indeksu spoza zakresu lub pustej tablicy. Spróbujmy zamienić na wielkie litery wartość z nieprawidłowego indeksu:

  const pkmn = ["Pikachu", "Charizard", "Mew"];
  const outsideArray = pkmn[4]
  const outsideArrayAt = pkmn.at(4)
  console.log("brackets test", outsideArray.toUpperCase()) // Rzuca TypeError
  console.log("array at test", outsideArrayAt?.toUpperCase()) // Bezpiecznie zwraca undefined

Podczas gdy metoda .at() bezpiecznie zwraca undefined, gdy odwołasz się do nieprawidłowego indeksu, notacja nawiasowa skutkuje TypeError: Cannot read properties of undefined (reading 'toUpperCase'). Może to prowadzić do awarii aplikacji w trakcie działania lub błędów podczas budowania, szczególnie gdy aplikacja korzysta z dynamicznych danych.

Ta sama zasada dotyczy pustej tablicy. Na przykład:

const emptyArray: string[] = [];
const firstValue = emptyArray[0]; // TypeError
const firstValueAt = emptyArray.at(0); // undefined

Czytelniejsze indeksowanie ujemne

Dostęp do elementów od końca tablicy to coś, co często spotyka się przy obsłudze takich rzeczy, jak paginacja czy logowanie. To właśnie tutaj metoda .at() okazuje się przydatna — pozwala na indeksowanie ujemne w czystszy i bardziej przejrzysty sposób:

   const pkmn = ["Pikachu", "Charizard", "Mew"];
   const lastTwo = [pkmn[pkmn.length - 1], pkmn[pkmn.length - 2]];
   const lastTwoAt = [pkmn.at(-1), pkmn.at(-2)];

.at() jest po prostu lepsze

Choć .at() wydaje się niewielkim dodatkiem do JavaScript, w rzeczywistości jest bardziej intuicyjnym sposobem dostępu do elementów tablicy. Poprawia bezpieczeństwo typów, zwracając undefined dla nieprawidłowych indeksów, zmniejszając ilość błędów w czasie działania i upraszczając indeksowanie ujemne. Notacja nawiasowa [] wciąż działa, jednak .at() to nowoczesna alternatywa, zgodna z najlepszymi praktykami w TypeScript i pozwalająca unikać częstych błędów. To nie jest obowiązkowy wybór, ale po prostu lepsza opcja dla czystszego i bezpieczniejszego kodu.