Frontend Thursday vol. 45

1. TypeScript 4.4 Beta

W minionym tygodniu światło dzienne ujrzała beta TypeScript 4.4 i po raz kolejny nie znajdziemy tu wielkich nowości, a raczej zbiór drobnych usprawnień. Nie ma się zresztą czemu dziwić – kolejne wersje TypeScriptu ukazują się ostatnio jak grzyby po deszczu, a czasy, kiedy standardem na rynku były rzadkie i duże releasy mamy już dawno za sobą. Jeśli chcecie zgłębić w szczegóły tego wydania, to odsyłam Was do blogposta, który znajdziecie w źródłach. Ja natomiast postaram się przybliżyć Wam w telegraficznym skrócie wszystkie usprawnienia.

Zacznijmy od wprowadzenia type guards działających nie tylko bezpośrednio w klauzuli if, ale także w przy wyniesieniu warunku do osobnej zmiennej. Z usprawnienia najbardziej skorzystają deweloperzy agresywnie optymalizujący swój kod (do tej pory byli oni skazani albo na niewydajne wielokrotne sprawdzanie typu, albo niebezpieczne asercje typu), ale myślę, że znajdzie się też grupa problemów, w których usprawnienie to pozwoli tworzyć po prostu czytelniejszy kod.

function foo(arg: unknown) {
    const argIsString = typeof arg === "string";
    if (argIsString) {
        console.log(arg.toUpperCase());
        // Before TS 4.4: Error! Property 'toUpperCase' does not exist on type 'unknown'.
    }
}

Kolejna nowość to wsparcie dla symboli i template string patterns w indexed signatures (to jedno z takich zdań, które sprawia, że czuję się jak potężny elficki mag wypowiadający prastare zaklęcie). Z mojej perspektywy szczególnie ciekawie wygląda ta druga opcja, bo pozwala na modelowanie niedostępnych do tej pory struktur danych (np. obiektów posiadających dowolną liczbę data parameters).

interface ObjectWithDataParameters {
    [optName: `data-${string}`]: unknown;
}
declare let obj: ObjectWithDataParameters;
// Valid to assigns
obj["data-foo"] = true;
obj["data-bar"] = “foo”;
// Error! 'bar' wasn't declared in’ObjectWithDataParameters’.
myDict["bar"] = "oops";

Do TypeScriptu 4.4 trafią też dwie nowe flagi. Pierwsza z nich to `–useUnknownInCatchVariables` i zmienia ona typ wyłapanych w klauzuli try-catch błędów z any na unknown. Szczerze mówiąc, aż ciężko mi uwierzyć, że dopiero teraz doczekaliśmy się takiego usprawnienia, bo typ unknow daje w tej sytuacji dużo większe bezpieczeństwo typów.

try {
    executeSomeThirdPartyCode();
}
catch (err) { // err: unknown
    // Error! Property 'message' does not exist on type 'unknown'.
    console.error(err.message);
    // Works! We can narrow 'err' from 'unknown' to 'Error'.
    if (err instanceof Error) {
        console.error(err.message);
    }
}

Druga nowa flaga to `–exactOptionalPropertyTypes` i pozwoli ona na rozróżnienie w typach sytuacji, kiedy pole może być nieobecne i kiedy do pola przypisana została wartość undefined. Ma to szczególne znaczenie, kiedy korzystamy z spread operator i pętli for-in i po raz kolejny przyczynia się do lepszego oddania przez typu stanu rzeczywistego obiektów.

interface Dog {
    name: string,
    age?: number;
}
const dogA: Dog = {
    name: "Daniel",
    age: undefined, // Error! undefined isn't a number
};
const dogB: Dog = {
    name: "Daniel",
};
interface Cat {
    name: string,
    age: number | undefined;
}
const catA: Cat = {
    name: "Daniel",
    age: undefined,
};
const catB: Cat = {
    name: "Daniel",
};

Źródła:

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-beta/

2. Czy to już pora pożegnać Enzyme.js ?

Jeśli chodzi o nowości to doczekaliśmy się tak zwanego sezonu ogórkowego, więc w najbliższym czasie możecie spodziewać się od nas trochę więcej opiniii i podsumowań niż newsów. Artykuł, który znajdziecie w źródłach to mini-felieton na temat Enzyme.js i jego przyszłości. Jeśli jeszcze używacie go w swoich projektach i szukacie argumentów, jak przekonać kolegów do migracji, to znajdziecie tutaj, co najmniej kilka bardzo sensownych. Jeśli natomiast nigdy nie słyszeliście o Enzyme.js, albo już pożegnaliście go w swoich projektach to ta publikacja może być dla Was małą lekcją historii lub też sentymentalną podróżą.

A i byłbym zapomniał: artykuł jest mocno zopiniowany i macie prawo się z nim nie zgadzać.

Źródła:

https://www.piotrstaniow.pl/goodbye-enzyme

Bonus: `image-set` wreszcie jest wspierany we wszystkich popularnych przeglądarkach

Razem z pojawieniem się końcem kwietnia Firefox 88, selektor `image-set` stał się powszechnie wspierany. Jeśli jeszcze nigdy o nim nie słyszeliście, to w dużym skrócie pozwala on zdefiniować obraz w kilku rozdzielczościach (mi ta funkcjonalność strasznie przypomina określanie zasobów w androidowych aplikacjach). W ten sposób sama przeglądarka może zdecydować, który wariant najlepiej załadować. Pod uwagę brane są takie czynniki jak rozdzielczość ekranu, czy prędkość internetu.

Jeśli mocno optymalizujecie swoje aplikacje to zdecydowanie warto zainteresować się tym selektorem (w źródłach znajdziecie bardzo dobre podsumowanie tematu, które zahacza też o mocno powiązane tematy, takie jak na przykład optymalne formaty zdjęć)

.hero {
  /* Fallback */
  background-image: url("platypus.png");
  /* Standard use */
  background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}
.villain {
  background-image: image-set(
    "kitten.avif" type("image/avif"),
    "kitten.jpg" type("image/jpeg")
  );
}

Źródła:

https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/

1. TypeScript 4.4 Beta

Źródła:

2. Czy to już pora pożegnać Enzyme.js ?

Źródła:

Bonus: `image-set` wreszcie jest wspierany we wszystkich popularnych przeglądarkach

Źródła:

Odkryj więcej świetnych treści!