Satysfakcjonujący TypeScript 4.9 – Frontend Weekly vol. 107

1. TypeScript 4.9 Beta

Jeśli śledzicie nasze przeglądy od dłuższego czasu, to pewnie wiecie jak wygląda mój entuzjazm jeśli chodzi o kolejne wersje TypeScrpt. W ostatnich latach język bardzo dojrzał i wprowadzane do niego nowości są już raczej kosmetyczne. Kiedy zobaczyłem betę TypeScript 4.9 nie spodziewałem się więc niczego szczególnego. Oj, jak bardzo się myliłem! TypeScript 4.9 po raz pierwszy od dłuższego czasu wprowadza nowość do składni języka: operator satisfies. 

Tłumacząc działanie nowego operatora posłużę się przykładem z notatki od Microsoftu. Załóżmy, że potrzebujemy otypować następujący kod:

// Each property can be a string or an RGB tuple.
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

// We want to be able to use array methods on 'red'...
const redComponent = palette.red.at(0);

// or string methods on 'green'...
const greenNormalized = palette.green.toUpperCase();

W pierwszej chwili do głowy przyjść może zdefiniowanie typu Color oraz wykorzystanie typu Record. Niestety, w takim przypadku zmuszeni jesteśmy wykonywać niebezpieczną operację rzutowania:

type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Color, string | RGB>

const palette: Palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

// We want to be able to use array methods on 'red'...
const redComponent = (palette.red as RGB).at(0);

// or string methods on 'green'...
const greenNormalized = (palette.green as string).toUpperCase();

Aby usunąć rzutowanie, możemy w definicji typu zawrzeć sposób w jaki będzie on definiowany. W naszym przypadku nie jest to może najgorszy pomysł, ale zobaczcie sami, ile dodatkowego kodu musimy wygenerować, nie mówiąc już o dużo mniejszej elastyczności.

type StringColor =  "green";
type RGBColor = "red" | "blue";
type RGB = [red: number, green: number, blue: number];

type StringColorPalette = Record<StringColor, string>;
type RGBColorPalette = Record<RGBColor, RGB>;
type Palette = StringColorPalette & RGBColorPalette;

const palette: Palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

Obejściem tego problemu ma być nowy operator satisfies, który będzie walidował typ w momencie przypisania, ale nie będzie miał wpływu na typ ewaluowany przez TypeScript. Brzmi skomplikowanie, ale na prostym przykładzie dobrze widać, o co chodzi:

type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Color, string | RGB>

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Palette;

// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

// —-----------------------------------
// Example errors caught by satisfies
//  —-----------------------------------

const spelloPalette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255] // Such typos are now caught
} satisfies Palette;

// Missing properties are now caught
const missingColorPalette = {
    red: [255, 0, 0],
    bleu: [0, 0, 255]
} satisfies Palette;

const wrongColorTypePalette = {
    red: [255, 0], // Such typos are now also caught
    green: "#00ff00",
    bleu: [0, 0, 255]
} satisfies Palette;

Oczywiście, to nie koniec nowości zmierzających do TypeScript 4.9. Resztę listy, stanowią już bardziej typowe dla TypeScript drobne usprawnienia jak lepsze zawężanie typów przy użyciu operatora in czy zwracanie błędów przy bezpośrednich porównaniach z obiektem NaN. Jeśli jesteście głodni szczegółów, to jak zwykle notka dostarczona przez Microsoft jest miejscem, w które powinniście się udać (patrz źródła).

Na razie TypeScript 4.9 otrzymał pierwszą wersję beta. Patrząc na cykl pojawiania się kolejnych wersji języka od Microsoftu, stabilnej wersji oczekiwać możemy w okolicach listopada. Trzymamy również kciuki, żeby nowy operator przetrwał do tego czasu. Przy okazji poprzednich wersji języka zdarzały się już funkcjonalności, które owej ścieżki nie przetrwały.

Źródła:

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

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Web Almanach 2022

Web Almanach, to wraz z StackoOverflow Survey i The State of JS najważniejsze raporty, które pozwalają nam wyciągać wnioski na temat naszego frontendowego światka. Web Almanach od pozostałych wyróżnia fakt, że zamiast na opiniach deweloperów, opiera się on na twardych danych zebranych podczas scrappowania internetu. No i w odróżnieniu od pozostałych nie da się go w całości przeczytać podczas jednego posiedzenia przy porannej kawce.

Skłamałbym, gdybym powiedział, że ja miałem już czas aby samodzielnie przebrnąć przez raport od dechy do dechy. Jedyna na co starczyło mi czasu, to pobieżne przeglądnięcie najbardziej interesujących mnie rozdziałów. Od dechy do dechy udało mi się natomiast przebrnąć przez twitterowy wątek Stefana Judis, który skumulował całą masę ciekawostek. Na zachętę poniżej znajdziecie kilka z nich:

• Największy zescrappowany stylesheet miał 62MB (!)
• Ponad 70% stron do definiowania rozmiary czcionek nadal używa pikseli
• Najmniej popularnym kolorem w plikach CSS jest `mediumspringgreen`
• Mediana pobieranych przez aplikację skryptów wynosi 20
• jquery nadal jest królem internetu (korzysta z niego 81% stron). Jeśli React kiedykolwiek chce zająć jego miejsce, to przed nim piekielnie długa droga (obecnie używa go 8% stron)
• Tylko 2% desktopowych aplikacji korzysta z custom elements.

A jeśli też szukacie dobrego skrótu, który dla odmiany da się przeczytać przy porannej kawie, to tutaj znajdziecie cały wątek.

Źródła:

https://almanac.httparchive.org/en/2022/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

Bonus: nowa generacja frontendowych frameworków

Jeśli regularnie śledzicie nasze przeglądy, to na pewno jesteście na bieżąco z nowościami takimi jak Remix, Astro czy Qwik. Czasem jednak warto na chwilę się zatrzymać i zastanowić skąd przychodzimy i dokąd zmierzamy. Takiej zadumie poddali się autorzy bloga frontendmastery, którzy wysuwają tezę mówiącą, że rozpoczyna się właśnie nowa era frontendowych frameworków. Jeśli szukacie lekkiej lektury w sam raz na piątkowy wieczór  (trochę lżejszej niż Web Almanach 2022), to nie musicie dalej szukać.

Źródła:

https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/

Przyszłotygodniowe Frontend Weekly zostaje odwołane, ze względu na mój urlop. Jeśli boicie się o swoje samopoczucie ze względu na brak cotygodniowego zastrzyku nowości, to całkiem niezłą dawkę znajdziecie w aplikacji (co prawda bez mojego umiarkowanie spostrzegawczego i umiarkowanie zabawnego komentarza, ale zawsze 😉)