Frontend Thursday vol. 53

1. Typescript 4.4

Trochę ponad tydzień temu opublikowany został TypeScript 4.4, a musicie wiedzieć, że pojawienie się kolejnej wersji tego języka, to zawsze małe święto w naszym frontendowym świecie. W końcu jak wynika z State of JS 2020, na co dzień z języka Microsoftu korzysta ponad 75% JavaScript developerów, z czego ponad 90% jest usatysfakcjonowanych z zaistniałej sytuacji. Uczcijmy więc tą długo wyczekiwaną chwilę przeglądając w telegraficznym skrócie nowoś

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",
};

Twórcy języka uchylili też rąbka tajemnicy, jeśli chodzi kolejną wersję języka. W issue zamieszczonym na Githubie znajdziemy szkic funkcjonalności, jakie znaleźć mają się w TypeScript 4.5 oraz plan releasu tejże wersji (TLDR: wersja stabilna ukaże się 16 listopada, czyli przeczytacie o niej w Frontend Thursday vol. 64). Jeśli chcecie zabłysnąć wiedzą na najbliższej kawie, to warto zerknąć, ale ja osobiście poczekam na wersję alfa, której zapewne tradycyjnie już towarzyszyć będzie świetnie opracowana notatka.

Źródła:

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/
https://github.com/microsoft/TypeScript/issues/45418

2. Angular 12.2

Angular 12.2 ukazał się początkiem sierpnia, ale jakimś cudem uciekł poza naszymi radarami. Jak na wersję minor frameworka to znajdziemy tu całkiem sporo usprawnień. Te które moim zdaniem najbardziej zasługują na uwagę, to nowe API dla Form Validators, wsparcie dla RxJS 7 (wreszcie koniec z .toPromise()!) i wsparcie dla underscore separator w templatach.

{{ 1_000_000 }}

/*
Wsparcie dla underscore separator to mała rzecz, ale za to jak cieszy
(zwolennicy Reacta, którzy taką funkcjonalność mają od dawna, prawdopodobnie pukają się właśnie po głowach).
*/

Prawdopodobnie nie dzieliłbym się z Wami tym newsem, gdyby nie jeszcze jedno “małe” usprawnienie. Otóż `ng build` otrzymał częściowe wsparcie dla esbuild! Dlaczego wsparcie jest tylko częściowe? Jak twierdzą twórcy Angulara esbuild nie obsługuje jeszcze wszystkich niezbędnych optymalizacji, dlatego wciąż niezbędnym krokiem w budowaniu aplikacji jest odpalenie tersera. Zespół niestety nie podzielił się ze światem benchmarkami nowego rozwiązania, ale buszując w sieci można natknąć się na deweloperów raportujących czasy budowania szybsze nawet o 20-30%. Jeśli takie rzeczy lądują w wersji minor, to ja już nie mogę doczekać się kolejnej wersji major!

Źródła:

https://www.angularminds.com/blog/article/angular-v12-2.html

3. Granie w przeglądarce, czyli Chrome testuje nowe API

Ostatnimi czasy staramy nie dzielić się z Wami nowymi wersjami przeglądarek, bo te rosną jak grzyby po deszczu i zwykle nie zawierają nic wartego uwagi. Tym razem jest jednak trochę inaczej, bo o ile z nadchodzących nowości statystyczny deweloper raczej nie skorzysta, to warto zauważyć je w kontekście raczkującego trendu, jakim jest granie w przeglądarkach (a może lepiej byłoby powiedzieć, jakim jest wsparcie przeglądarek dla Stadi?)

Pierwsze nowe API to WebCodecs, które ma umożliwić lepszy niskopoziomowy dostęp do kodeków wideo, co z kolei ma usprawnić procesowanie wideo szczególnie na słabszych komputerach. Jeśli gry to nie pierwsza rzecz, jaka przychodzi Wam na myśl, to nie jesteście sami, bo tą funkcjonalnością mocno zainteresowany jest między innymi Zoom. Jeśli po drodze nie wydarzy się żaden kataklizm, to WebCodecs API trafi do Chrome już w nadchodzącej wersji 94.

Apropo streamingu, to pamiętacie jeszcze Mighty, czyli streaming przeglądarki z chmury ?

Drugie z ciekawie wyglądających API to WebGPU, czyli namaszczony przez Google następca WebGL. W tym przypadku skojarzenia z gamingiem są oczywiste, ale firma z Mountain View twierdzi, że technologia ta znajdzie swoje zastosowanie również przy prezentowaniu złożonych modeli 3D czy w Machine Learningu. No cóż, w to pierwsze mogę jeszcze uwierzyć, ale co do drugiej sugestii mam spore wątpliwości. WebGPU trafi w nasze ręce najwczeście w Chrome 99, więc przyjdzie nam jeszcze trochę poczekać.